Search code examples
htmlcsssvgsvg-animate

svg storke-dashoffest makes anti clockwise animation


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>

Solution

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