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>

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

所以我读了一些SVG路径，特别是弧a。

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

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

由于a的解释非常复杂，这里有两个链接，其中有一些阅读：

＆＃13;

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

＆＃13;

svg storke-dashoffest制作逆时针动画

3 个答案: