jquery - 需要按顺时针方向为圆形边框设置动画

Question

我需要顺时针旋转虚线圆圈，目前它的旋转是“逆时针”。我认为我们可以使用 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/

提前致谢!

Answer 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>

只需给给坐标一个负值