带有边框/描边的SVG图像 [英] SVG image with a border / stroke

问题描述

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

I'm trying to add a border around a svg image. I have tried 2 approaches but both failed...

尝试1:绘制图像，但不显示边框.

Attempt 1 : Draws image but no border..

<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:绘制图像，但不显示边框.

Attempt 2 : Draws image but no border..

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

So my question is, is it possible to define a image on a svg element and have a border/stroke around it at the same time?

还有更多的地方，我似乎可以将svg元素放置在带有transform和x/y属性的位置.哪个是首选，为什么?

Futhermore it seems i can position svg elements with translate and with the x/y attribute. Which is preffered and why?

推荐答案

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

stroke does not apply to <image> or <use>, only shapes and text. If you want to draw a border round it, draw a <rect> after the image with the same x,y,width and height as the image and give that a stroke and a fill of "none".

翻译与x/y的关系-取决于您的用例.

As to translate vs x/y - it depends on your use case.

这篇关于带有边框/描边的SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！