需要明智地为圆边框设置动画

时间:2016-01-13 05:13:08

标签: jquery html5 css3 svg

我需要顺时针旋转虚线笔划圆,当前是旋转"反时钟"。我认为我们可以使用PATH完成,但不知道如何创建它,

<svg preserveAspectRatio="none" viewBox="0 0 500 500" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2"  stroke="red" fill="white" stroke-linecap="round" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" >
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

这是链接,

https://jsfiddle.net/y492v144/

提前致谢!

1 个答案:

答案 0 :(得分:1)

查看此DEMO

<svg preserveAspectRatio="none" viewBox="0 0 500 500" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2"  stroke="red" fill="white" stroke-linecap="round" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" >
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="-1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

只需给to坐标negative value