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/
...但是破折号并没有占据一半的圆圈，并且动画也没有完全围绕。
那么这个百分比有什么参考意义呢？
Per the SVG规格
If a <percentage>使用时，该值表示当前视口的百分比（请参见Units).
...百分比计算为 sqrt((实际宽度)**2 + (实际高度)**2))/sqrt(2) 的指定百分比。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
