SVG Storke-Dashoffest制作抗顺时针动画

Question

我试图绘制一个SVG圆圈。由于我需要使用dasheft最具动画作用，因此圆圈的冲程仅朝着逆时针方向填充。有什么方法可以以时钟的方向移动动画。

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>

Answer 2

只需翻转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 3

，所以我在SVG路径上阅读了一些，尤其是ARC a。

A弧具有large-arc-flag和sweep-flag来控制其绘制方式。

您使用的一个具有1,0 ARC，但您应该使用1,1，此处在以下示例中完成。此外，终点需要调整到-0.00001,0。

由于a非常复杂，这是两个阅读的链接：

• http://tutorials.jenkov.com/svg/path-element.html#arcs
• https://css-tricks.com/svg-path-syntax-lustrated-guide/

<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>