Question

我正在尝试在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元素。哪个是优先的，为什么？

Answer 1

stroke不适用于<image>或<use>，仅适用于形状和文字。如果要在其周围绘制边框，请在图像后面绘制<rect>，使其具有与图像相同的x，y，宽度和高度，并为其指定笔划和填充“无”。

至于vs x / y的转换 - 这取决于你的用例。

Answer 2

如果由于某种原因您不能更改SVG元素，则可以使用CSS CSS属性来解决：

#note-0 {
    outline: 6px solid white;
}

Answer 3

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

image { 
    filter: drop-shadow(0px 0px 1px red);
}

带边框/笔划的SVG图像

3 个答案: