本文介绍一种纯 svg 原生方案，通过叠加两个 `
在 SVG 中，原生并不支持 border-style: double（该 CSS 属性仅对 HTML 盒模型生效），也无法直接为 <svg> 根元素设置 outline 以外的双线边框——而 outline 又必须依赖 style 属性，违背了本题“零样式属性”的约束条件。此时，最可靠、语义清晰且完全符合 SVG 规范的替代方案是：用两个同心矩形（<rect>）手动构建视觉上的双线边框。
原理很简单：绘制两层细边框矩形，外层略大、内层略小，并保持相同的描边颜色与宽度，中间留出空白间隙，即可形成典型的双线效果。关键在于精确计算坐标与尺寸，确保边框居中且无像素偏移：
<svg width="250" height="100">
<!-- 外层边框：覆盖整个 SVG viewBox 边缘（含 0.5px 偏移以对齐像素网格） -->
<rect x="0.5" y="0.5" width="249" height="99"
stroke="#ff0000" stroke-width="1" fill="none"/>
<!-- 内层边框：向内缩进 2px（即 x/y +2, width/height -4），形成等距间隙 -->
<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>✅ 技术要点说明：
- 所有 <rect> 均使用 stroke-width="1"，避免粗描边导致间隙失真；
- x 和 y 设置为 .5 值（如 0.5, 2.5）可使描边精确落在像素中心，防止抗锯齿模糊；
- 外矩形 width="249" / height="99" 对应 250×100 SVG 画布减去 1px 总边框厚度（两侧各 0.5）；
- 内矩形进一步缩进 2px（即 x/y +2, w/h -4），确保两线间距恒为 2px，视觉等效于 CSS double 的标准间距；
- fill="none" 是必需的，否则会遮挡内容。
⚠️ 注意事项：
- 此方案适用于静态尺寸 SVG；若需响应式适配，建议结合 viewBox + preserveAspectRatio，并用 JS 动态重算矩形参数；
- 不要将两矩形 stroke-width 设为 2 或更大——这会压缩间隙，破坏“双线”辨识度；
- 若需不同颜色双线（如外红内蓝），只需分别设置 stroke 属性，灵活性反而高于 CSS outline。
综上，该双 <rect> 方案不仅是可行解，更是 SVG 环境下最可控、最可预测的双线边框实现方式，完美满足无样式属性、零外部依赖的硬性要求。
