在网页图形绘制中，SVG的stroke-dasharray属性是控制虚线样式的核心工具。然而，当开发者试图使用零值或设置多组数字对时，常常遭遇意料之外的渲染结果——虚线不是缺段就是变实线，甚至在不同浏览器上表现迥异。问题究竟出在哪里？这背后其实藏着浏览器实现与W3C规范之间的微妙差异。
零值：看似简洁，实则陷阱
stroke-dasharray接受一组逗号或空格分隔的数字，依次定义“实线长度”和“间隙长度”。当其中一个数字为0时，意味着该段长度为0——例如stroke-dasharray="5,0"，理论上应呈现5像素实线后紧跟0像素间隙，即无缝衔接的连续实线。但实际渲染中，某些浏览器会直接忽略零值，导致整条线变为实线；另一些则可能因舍入误差产生微小的不可见断点，在缩放时暴露为锯齿。
更棘手的是，零值常与奇数个值组合使用。根据SVG规范，如果值数量为奇数，浏览器会将其复制一次以补足偶数。例如stroke-dasharray="10,0,5"会被扩展为10,0,5,10,0,5——这种重复逻辑在多数浏览器中表现一致，但一旦零值参与，部分环境会将“0”视为无效值而跳出循环，最终只应用前两个有效数字。
多对值：复杂模式的“薛定谔”困境
当开发者试图用多组数字对创建复杂虚线（如点线、短横线交替），问题更加突出。例如stroke-dasharray="20,10,5,10"表示：20像素实线、10间隙、5实线、10间隙。这种四值模式在Chrome和Firefox中表现正常，但在旧版Safari或某些WebKit衍生浏览器中，可能会因为浮点精度问题导致最终轮廓偏移——尤其是当路径为曲线或封闭图形时，末段与首段的衔接处会出现明显的“额外点”。
更令人困惑的是，当值中包含小数时，多对模式的渲染差异会进一步放大。横向对比测试显示，iOS Safari中0.5像素的实线段在某些缩放级别下可能完全消失，而桌面Chrome则会保留。这种不一致性直接影响了跨平台UI的一致性和可访问性。
规范与现实的鸿沟
W3C的SVG2规范明确要求：stroke-dasharray中所有数值必须为非负，零值合法但会产生零长度线段；奇数个数值应重复一次。然而，各大浏览器在实现细节上存在分歧。Microsoft Edge（基于Chromium前）曾长期忽略零值；Firefox直到2020年的某个版本才修复了在缩放时零值虚线断裂的Bug。即便是当前主流版本，当stroke-dashoffset（虚线偏移量）与零值组合时，各浏览器对“分界点落在零长度段上”的处理方式仍不统一——有的视为间隙，有的视为实线。
开发者避坑指南
面对这些潜在问题，专业开发者总结出三条实用经验：
- 避免使用零值：若需实线，直接省略
stroke-dasharray或使用stroke-dasharray="none"；若需隐藏线段，可改用stroke-opacity或pathLength控制。 - 强制偶数个值：手动将所有值扩展为偶数，例如
"10,0"改为"10,0,10,0"，可规避浏览器重复逻辑的歧义。 - 使用相对单位与矢量缩放：结合
vector-effect="non-scaling-stroke"，并在CSS中用百分比或视口单位定义虚线长度，能减少缩放时的计算误差。
未来展望
随着SVG 2规范逐渐被浏览器广泛采纳，零值和多对值的渲染行为有望统一。W3C的测试套件已开始要求所有实现必须通过stroke-dasharray的精确算法匹配。与此同时，CSS中类似的stroke-dasharray属性（用于Canvas 2D）也在标准化进程中，预计将引入更严格的零值处理规则。对于当前仍需要兼容老旧浏览器的项目，最稳妥的方案依然是保持值对数为偶、避免零、测试覆盖主流引擎。毕竟，一条看似简单的虚线，背后可能藏着浏览器博弈的“隐形断点”。