CSS 为 SVG 图像添加边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14751178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 21:35:59 来源:igfitidea点击:
Adding border to SVG image
提问by Sergiu
Is it possible to wrap a SVG image inside a border (that is - putting a border from CSS around that image) .
是否可以将 SVG 图像包裹在边框内（即 - 在该图像周围放置来自 CSS 的边框）。
回答by Robert Longson
Draw a <rect>round the image which is fill="none". You can use the stroke of the <rect>as the border.
绘制一个<rect>圆形填充=“无”的图像。您可以使用 的笔触<rect>作为边框。
回答by Pedro Figueiredo
Here are some examples, tested in Firefox:
以下是一些在 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>
Hope it helps. :)
希望能帮助到你。:)
