svg storke-dashoffest制作反时针动画 [英] svg storke-dashoffest makes anti clockwise animation

问题描述

我试图画一个svg圈。因为我需要使用stroke-dashoffest对它进行动画处理，所以圆形的笔划只填充逆时针方向。有什么方法可以按时间顺序移动动画。

 我的代码：
 
< svg width =130height =130xmlns =http://www.w3.org/2000/svg> 
 <！ - 用Method Draw创建 -  http://github.com/duopixel/Method-Draw/  - > 
 
 
< g> 
< title>第1层< / title> 
< g> 
< path stroke =blueid =svg_1d =m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0zopacity =0.5stroke-width =5 stroke-dashoffset =2000stroke-dasharray =2000fill =red> 
  gt ;< /动画> 
< / path> 
< / g> 
< / g> 
< / svg> 
  

解决方案

只需翻转svg即可。您可以使用内联变换来翻转路径：

< svg id =this_svgwidth =130height =130xmlns =http://www.w3.org/2000/svg> < g取代; < title>第1层< / title> < g取代; < path transform =translate（130），scale（-1,1）stroke =blueid =svg_1d =m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z opacity =0.5stroke-width =5stroke-dashoffset =2000stroke-dasharray =2000fill =red> < animate id =project_study_anim1attributeName =stroke-dashoffsetfrom =2000to =0begin =1sdur =5sfill =freezerepeatCount =1> < /动画> < /路径> < / svg>

I tried to draw a svg circle. As i need to animate it using stroke-dashoffest the circle's stroke fills only in anti-clockwise direction. Is there any way to move the animation in clock wise direction.

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>

解决方案

Just flip the svg. [edit] you can use the inline transform to flip just the path:

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

这篇关于svg storke-dashoffest制作反时针动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！