svg storke-dashoffest 制作逆时针动画

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>