22

我正在尝试在 svg 图像周围添加边框。我尝试了两种方法，但都失败了......

尝试1：绘制图像但没有边框..

<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>

尝试2：绘制图像但没有边框..

<defs>
    <image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>

所以我的问题是，是否可以在 svg 元素上定义图像并同时在其周围设置边框/描边？

此外，我似乎可以使用 translate 和 x/y 属性来定位 svg 元素。哪个是首选，为什么？

4

3 回答 3

35

stroke不适用于<image>or <use>，仅适用于形状和文本。如果你想在它周围画一个边框，<rect>在图像后面画一个与图像相同的 x、y、宽度和高度，并给它一个笔触和一个“无”填充。

至于翻译与 x/y - 这取决于您的用例。

于 2012-11-04T10:35:02.400 回答
9

如果由于某种原因您无法更改 SVG 元素，则可以使用 outline CSS 属性的解决方法：

#note-0 {
    outline: 6px solid white;
}
于 2019-11-11T13:09:13.613 回答
1

如果您需要它环绕圆形图像（例如 svg 形状），并且您只需要一些颜色来勾勒它，您可能会发现这样的东西很有用：

image { 
    filter: drop-shadow(0px 0px 1px red);
}
于 2021-03-18T12:37:10.687 回答