SVG stroke-dashoffset属性百分比值的基准是什么？

你遇到的这个点确实是SVG属性里容易混淆的细节——stroke-dashoffset的百分比值并不是基于路径总长度计算的，而是基于元素参考框（reference box）的对角线长度。

具体规则说明： #

根据SVG规范，当给stroke-dashoffset（包括同类型的stroke-dasharray）设置百分比值时，这个百分比的参考基准是元素「参考框的归一化对角线长度」。默认情况下，参考框指的是元素的stroke bounding box——也就是包含元素本体、描边以及所有标记（marker）的最小矩形边界框。

结合你的代码示例分析： #

你的圆形r="40"且stroke-width="10"，所以它的stroke bounding box的宽和高都是40*2 + 10 = 90（因为描边会向路径内外各延伸一半宽度）。这个矩形的对角线长度是90 * √2 ≈ 127.28，你设置的50%就是这个值的一半，约63.64。而圆形的实际周长是2π*40 ≈ 251.33，显然63.64远小于周长的一半，这就是为什么你的虚线没占圆形一半、动画也没法完整绕一圈的核心原因。

实现「基于路径长度的百分比」的方法： #

如果想要让stroke-dasharray或stroke-dashoffset的百分比对应路径总长度，需要用变通方案：

• 方法1：通过JS获取路径实际长度，用CSS变量传递数值：

  const circle = document.querySelector('.circle');
  const pathLength = circle.getTotalLength();
  circle.style.setProperty('--path-length', pathLength);
  

  对应CSS写法：

  .circles {
    stroke-dasharray: calc(var(--path-length) * 0.5);
    animation: dashingRotation 2s infinite;
  }
  @keyframes dashingRotation {
    0% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: var(--path-length); }
    100% { stroke-dashoffset: var(--path-length); }
  }
  

• 方法2：在支持SVG 2的环境中，直接使用path('length')函数引用路径长度：

  .circles {
    stroke-dasharray: calc(path('length') * 0.5);
    animation: dashingRotation 2s infinite;
  }
  

这样就能实现你预期的「基于路径长度的百分比动画」效果了。

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