添加边框到SVG图像

Question

是否可以将SVG图像包装在边框内（即 - 围绕该图像放置CSS边框）。

Answer 1

在图像上绘制<rect>，填充=“无”。您可以使用<rect>的笔划作为边框。

Answer 2

以下是一些在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>

希望有帮助。 ：）

Answer 3

是的，只需使用css添加边框，就像使用任何元素一样。

使用内联样式：

<img src="test.svg" style="border: 1px solid black;" />

使用class：

HTML

<img class="framed" src="test.svg" />

CSS

.framed {
     border: 1px solid black;
}