svg stroke-dashoffset 的百分比值的基础是什么

Question

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Stroke-dashoffset

根据上面的链接，lines-dashoffset css 属性接受百分比。

百分比是多少的值？

我预计它是路径的总长度。但在一些实验中似乎并非如此。

在这里我尝试从 0% 到 100% 进行动画处理...

.circles {
    stroke-dasharray: 50%;
    animation-name: dashingRotation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes dashingRotation {
    0%     {stroke-dashoffset: 0%;}
    50%    {stroke-dashoffset: 100%;}
    100%   {stroke-dashoffset: 100%}
}

完整代码： https: //jsfiddle.net/tssn40yL/

...但是破折号并没有占据一半的圆圈，并且动画也没有完全围绕。

那么这个百分比有什么参考意义呢？

Answer 1

根据SVG 规范

如果使用 a <percentage>，则该值表示当前视口的百分比（请参阅单位）。
...百分比计算为 sqrt((实际宽度)**2 + (实际高度)**2))/sqrt(2) 的指定百分比。