我需要顺时针旋转虚线笔划圆,当前是旋转"反时钟"。我认为我们可以使用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/
提前致谢!
答案 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