svg - 带有边框/描边的SVG图像

Question

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

尝试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元素上定义图像并同时在其周围有边框/描边？

此外，看来我可以将带有svg元素的元素并带有x / y属性。哪个优先，为什么？

Answer 1

stroke不适用于<image>或<use>，仅适用于形状和文本。如果要在其周围绘制边框，请在图像后绘制x，y，宽度和高度与图像相同的<rect>，并对其进行描边和填充“无”。

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