如何不借助样式属性，通过<rect>为<svg>元素实现双边框？

当然可以用方案实现双边框效果，核心思路就是叠加两个元素，通过调整它们的位置、尺寸和描边属性，模拟出CSS outline: 3px double red 的视觉效果。

实现代码 #

<svg width="250" height="100">
  <!-- 外层边框 -->
  <rect x="1.5" y="1.5" width="247" height="97" stroke="#ff0000" stroke-width="3" fill="none"/>
  <!-- 内层边框：偏移量 = 外层描边宽度 + 中间空隙宽度 -->
  <rect x="7.5" y="7.5" width="235" height="85" stroke="#ff0000" stroke-width="3" fill="none"/>
  <text x="45" y="50" id="xc">Double Border Example</text>
</svg>

原理说明 #

• 第一个<rect>负责绘制最外侧的红色边框，和你原来的单边框设置一致；
• 第二个<rect>通过调整x/y的偏移量（这里设为7.5，等于外层描边宽度3 + 中间空隙宽度3），同时对应缩小width和height（各减去2*(3+3)=12），保持相同的描边宽度和颜色，这样两个边框之间就会留出空隙，形成双边框的效果。

如果需要调整中间空隙的大小，只需要修改内层<rect>的偏移量和对应的宽高数值即可。

内容的提问来源于stack exchange，提问作者TheGaME