在 SVG（转换后的）图像周围放置边框答案

【问题标题】：Put a border around a SVG (converted) image在 SVG（转换后的）图像周围放置边框
【发布时间】：2015-08-25 10:08:43
【问题描述】：

所以我有这张图片（从 PNG 转换为 SVG）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z"/></svg>

现在我可以使用填充来更改颜色等。但是我无法使用边框属性在图像本身周围获得笔触，我只是在整个元素周围获得了一个矩形（所以不在图像周围）并使用中风我什么也没得到。

这是一个尝试了笔画和边框属性的jsfiddle：https://jsfiddle.net/9mbqdbcj/

有人知道如何在图像周围设置边框吗？

提前致谢。

【问题讨论】：

标签： html css svg

【解决方案1】：

您可以使用 stroke 和 stroke-width 属性：

CSS：

stroke: red;
stroke-width: 0.1;

小提琴：https://jsfiddle.net/9mbqdbcj/2/

【讨论】：

主要区别在于stroke 的语法与border 的语法不同。更多信息在这里：developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…

【解决方案2】：

您可以在路径元素中申请，也可以尝试这种方式，我可以访问更改 html 然后

stroke="red" stroke-width="0.3"

这是你的代码

    &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"&gt;&lt;path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z" stroke="red" stroke-width="0.3" /&gt;&lt;/svg&gt;

演示代码DEMO

您可以通过Learn more了解更多信息

【讨论】：