SVG circle元素pathLength属性定义周长失效 跨浏览器表现异常

按照SVG规范定义，pathLength属性用于手动指定路径的总长度基准，理论上配合stroke-dasharray可以跳过周长计算直接按比例控制描边长度，但实际在<circle>元素上使用时会出现渲染不符合预期的问题，复现代码如下：

<svg width="100" height="100" viewBox="0 0 1 1">
  <circle
    cx="0.5"
    cy="0.5"
    stroke-width="0.5"
    r="0.25"
    pathLength="360"
    stroke-dasharray="180 360"
    stroke-dashoffset="0"
    stroke="black"
    fill="none"
  />
</svg>

上述代码理论上应该渲染半圆弧效果，将stroke-dasharray设置为360 360时应该完整闭合圆形，但实际渲染圆弧长度短于预期，且存在明显跨浏览器差异：

• Chromium内核浏览器渲染效果：
  
• Firefox浏览器渲染效果：
  
• Safari内核浏览器渲染效果：
  
  通过API获取各浏览器下的路径计算长度时，返回值同样存在差异：
  

你对pathLength的工作逻辑理解没有偏差，出现这个问题是浏览器实现的历史遗留问题，并非用法错误：

1. 早期SVG规范仅强制要求<path>元素必须严格遵循用户设置的pathLength值做描边、dash阵列的归一化计算，对于<circle>、<ellipse>、<rect>这类基础图形，规范没有做强制实现要求，给各浏览器留下了实现差异的空间。
2. 各内核的具体实现偏差：
   • Chromium内核对基础图形的pathLength计算会额外受stroke-width、viewBox缩放参数干扰，没有完全按照用户设定的长度基准做dash长度换算，因此会出现半长dash渲染后短于半圆的问题
   • Firefox对基础图形的dash阵列起始点计算逻辑和其他内核存在固定偏移
   • Safari未在基础图形上实现pathLength归一化逻辑，getTotalLength()始终返回浏览器自行计算的原生路径长度，完全忽略用户设置的pathLength参数，因此描边长度偏差最大。

测试到的getTotalLength()返回值差异就是这个兼容问题的直接表现，不属于规范定义的预期行为，是各浏览器长期未对齐实现的历史bug。

要稳定实现按比例控制圆形描边的效果，不要在<circle>等基础图形上依赖pathLength属性，使用以下方案即可：

• 优先使用<path>元素替代<circle>绘制圆形，pathLength属性在<path>元素上的所有现代浏览器实现完全一致，无兼容问题。绘制圆心在(0.5,0.5)、半径0.25的整圆可参考如下代码，设置pathLength="360"后，stroke-dasharray="180 360"即可完美渲染半圆弧，stroke-dasharray="360 360"可完整闭合圆形：

<path 
  d="M0.5 0.25a0.25 0.25 0 1 1 0 0.5a0.25 0.25 0 1 1 0 -0.5" 
  pathLength="360"
  stroke="black"
  fill="none"
  stroke-width="0.5"
/>

• 如果必须使用<circle>元素，不要设置pathLength属性，手动通过2 * Math.PI * r计算圆的真实周长，基于真实周长值设置stroke-dasharray和stroke-dashoffset即可，计算时可以给实线段长度加0.5px左右的冗余值，规避浮点精度误差导致的描边不闭合问题。

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