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

Question

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

根据上面的链接，stroke-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 specification

If a <percentage> is used, the value represents a percentage of the current viewport (see Units).
... The percentage is calculated as the specified percentage of sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).