将 CSS 双边框添加到<svg>没有样式属性的元素

Question

我试图添加双边框样式到<svg>元素，而不使用样式属性或外部样式表或在<svg>内使用内联<style>元素。在通过<svg>MDN文档后，我找到了一种方法，可以在<svg>周围添加边框，如下所示，但我只能绘制一个实心边框，而不是双边框。

实际输出:

<svg width="250" height="100">
<rect x="1.5" y="1.5" width="247" height="97" stroke="#ff0000" stroke-width="3" fill="none"/>
<text x="45" y="50" id="xc">Double Border Example</text>  
</svg>

预期输出:

这个解决方案使用style属性的<svg>元素与outline css属性。

<svg width="250" height="100" style="outline: 3px double red;">
<text x="45" y="50" id="xc">Double Border Example</text>  
</svg>

是否有一种方法来绘制双边界使用<rect>解决方案?

Answer 1

我能够在<svg>上使用2个<rect>元素获得双边框样式，如下所示，

<svg width="250" height="100">
<rect x="0.5" y="0.5" width="249" height="99" stroke="#ff0000" stroke-width="1" fill="none"/>
<rect x="2.5" y="2.5" width="245" height="95" stroke="#ff0000" stroke-width="1" fill="none"/>
<text x="45" y="50" id="xc">Double Border Example</text>  
</svg>