shape animation html5 | Sololearn: Learn to code for FREE!


shape animation html5

<svg width="2000" height="2000"> <circle cx="400" cy="400" r="300" style="fill:green; stroke:yellow; stroke-width:3;"> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </circle> </svg> why the circle shape not animate??? I wrote this code

3/27/2019 8:21:11 AM

Sanaa Hareb

3 Answers

New Answer


Please post question link, rather than posting the whole code here


Your circle is not moving 'cause you're animating for the attributeName "x" but there's no attribute called "x" in the <circle>. Use "cx" , "cy" or "r" attributes to animate. And by the next time, as Zlytherin suggested, kindly share the link of your code rather than posting entire code over here.


<svg width="150" height="200"> This tag is used for savage.