html - svg stroke-dashoffset 制作逆时针动画

Question

我试图画一个 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>

Answer 1

要反转 dashoffset 动画的方向，您不需要反转路径。您通常需要做的就是反转破折号偏移值更改的方向。

通常这意味着使非零数为负数。因此，在您的示例中，破折号偏移量从 2000 变为 0。将其从 -2000 更改为 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>