SVG圆形使用极小stroke-dasharray出现异常形状的原因及解决办法

问题现象 #

当给SVG圆形设置极小的stroke-dasharray值时，圆形中间会出现类似矩形的异常形状：

• Chrome浏览器：当stroke-dasharray的虚线长度取值为0.6及以下时触发
• Firefox浏览器：当取值为2及以下时触发

你提供的示例代码可以复现这个问题：

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
 <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.6, 10000"></circle>
</svg>
<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
 <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.7, 10000"></circle>
</svg>
<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
 <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="2, 10000"></circle>
</svg>
<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
 <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="3, 10000"></circle>
</svg>

对应的异常效果如下：

成因分析 #

这是浏览器SVG渲染引擎的精度计算限制导致的：
当stroke-dasharray的虚线长度远小于描边宽度（这里你的stroke-width=100，几乎等于圆的直径）时，渲染引擎在处理虚线端点（默认stroke-linecap="butt"，即无端点修饰）时，无法正确计算极小弧线段的轮廓——因为数值过小，引擎会把本应是微小弧形的虚线，近似渲染成了和描边宽度等宽的矩形块，从而出现了异常形状。

不同浏览器的渲染引擎（Chrome的Blink、Firefox的Gecko）对数值精度的阈值不同，所以触发问题的stroke-dasharray临界值不一样。

解决办法 #

有几种可行的方案，你可以根据业务需求选择：

1. 修改stroke-linecap属性

给圆形添加stroke-linecap="round"或stroke-linecap="square"，强制渲染引擎为虚线端点添加圆形/方形的修饰，即使虚线长度极小，也能避免矩形变形：

<circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.6, 10000" stroke-linecap="round"></circle>

2. 调整stroke-dasharray的虚线长度

将虚线长度调整到浏览器的临界值以上（Chrome≥0.7，Firefox≥3），让渲染引擎能正确识别并渲染弧线段，避免近似计算。

3. 替换实现方式

如果你的需求是在圆形边缘添加一个极小的标记，不如直接用独立的图形（比如小圆形、矩形）放在对应位置，代替描边虚线的方式：

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
 <circle cx="50" cy="50" r="50" fill="black"></circle>
 <!-- 用小圆形代替虚线标记 -->
 <circle cx="100" cy="50" r="0.3" fill="red"></circle>
</svg>

这种方式的渲染稳定性更高，不会有跨浏览器的兼容性问题。

内容的提问来源于stack exchange，提问作者Roland Soós