我正在尝试在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属性。哪个优先,为什么?
最佳答案
stroke不适用于<image>
或<use>
,仅适用于形状和文本。如果要在其周围绘制边框,请在图像后绘制x,y,宽度和高度与图像相同的<rect>
,并对其进行描边和填充“无”。
至于翻译vs x / y-取决于您的用例。
关于svg - 带有边框/描边的SVG图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13217669/