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）。