带边框/笔划的SVG图像

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

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

至于vs x/y - 它取决于你的用例.

Answer 2

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

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