Можно ли обернуть изображение SVG внутри рамки (то есть - поместить границу из CSS вокруг этого изображения).
Добавление границы к SVG-изображению
Ответ 1
Да, просто добавьте границу, используя css, как и с любым элементом.
Использование встроенного стиля:
<img src="test.svg" style="border: 1px solid black;" />
Использование класса:
HTML
<img class="framed" src="test.svg" />
CSS
.framed {
border: 1px solid black;
}
Ответ 2
Нарисуйте <rect>
вокруг изображения, которое заполняется = "none". Вы можете использовать штрих <rect>
в качестве границы.
Ответ 3
Вот несколько примеров, протестированных в Firefox:
<svg width="100" height="100" style="border:1px solid black">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br><br>
<svg width="300" height="100" style="border:1px solid black">
<rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>
<br><br>
<svg width="170" height="170" style="border:1px solid black">
<rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>
Надеюсь, поможет. :)