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>