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

如果使用<percentage>，则该值表示当前视口的百分比（请参阅Units）。