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

只需翻转 svg。 [编辑] 你可以使用内联转换来翻转路径：

<svg id="this_svg" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Layer 1</title>
    <g>
    <path transform= "translate(130),scale(-1,1)" 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>

</svg>

Answer 2

所以我阅读了一些关于 SVG 路径的内容，尤其是圆弧 a。

弧线有 large-arc-flag 和 sweep-flag 来控制它的绘制方式。

您使用的那个有 1,0 弧，但您应该使用 1,1，这里在下面的示例中完成。终点也需要调整，-0.00001,0.

由于 a 解释起来相当复杂，这里有两个链接和一些阅读：

<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.75 a54,52 0 1 1 -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 3

要反转 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>

svg stroke-dashoffset 制作逆时针动画

svg storke-dashoffest makes anti clockwise animation

html

css

svg

svg-animate