我尝试画一个 svg 圆。由于我需要使用 stroke-dashoffest 对其进行动画处理，因此圆圈的笔划仅沿逆时针方向填充。有什么办法可以让动画按顺时针方向移动吗？
My Code:
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>Layer 1</title>
<g>
<path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
<animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</g>
</svg>
要反转 dashoffset 动画的方向，您不需要反转路径。您通常需要做的就是反转破折号偏移值变化的方向。
通常这意味着将非零数设为负数。因此，在您的示例中，您的破折号偏移量来自2000 to 0。将其更改为来自-2000 to 0.
事实上，对于您的圆圈来说，2000 对于您的破折号图案来说太大了。对于圆形，周长实际上约为 333。
见下文：
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<g>
<path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="-333" stroke-dasharray="333" fill="red">
<animate id="project_study_anim1" attributeName="stroke-dashoffset" from="-333" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
