svg stroke-dashoffset 百分比值的基础是什么 [英] what is the basis of percent values for svg stroke-dashoffset

问题描述

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

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

According to the link above, the stroke-dashoffset css property accepts percents.

百分比的值是多少?

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

I expected it to the be the total length of the path. But in some experimentation that doesn't seem to be the case.

这里我尝试从 0% 到 100% 设置动画...

Here I try to animate from 0% to 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/

...但破折号没有占据一半的圆圈，动画也没有完全走完.

... but the dashes do not take up half the circles and the animation does not go all the way around.

那么这个百分比指的是什么?

So what do does that percent reference?

推荐答案

根据 SVG 规范

如果 被使用，该值代表当前视口的百分比(参见 Units).

这篇关于svg stroke-dashoffset 百分比值的基础是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！