+ 2

Why this animation is not working?

<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <svg width="1000" height="250"> <circle cx="150" cy="150" r="50" fill="orange"/> <animate attributeName="x" from="0" to="200" dur="3" fill="freeze" repeatCount="2"/> </svg> </body> </html>

html html5 svg animation

1st Aug 2017, 8:59 PM

gulkov misha

9 Respostas

+ 5

First of all you need to animate "cx" not "x". Second thing is you need to have animate tag inside the circle tag: <circle> <animate> </circle> Everything else is fine. 👍

1st Aug 2017, 9:27 PM

Stamen

+ 7

Error is the value of cx-attribute. You want the circle move from "0" to "200" and write in the same time cx="150". Mistake. The correct way is the next: <svg width="1000" height=250"> <circle cx="" cy="150" r="50" fill="orange"> <animate attributeName="cx" from="0" to="200" dur="3" fill="freeze" repeatCount="2" /> </circle> </svg>

1st Aug 2017, 9:27 PM

benka

+ 6

Use CSS for this purpose.

1st Aug 2017, 9:50 PM

benka

+ 6

I'm too :)

1st Aug 2017, 9:52 PM

benka

+ 4

With pleasure!

1st Aug 2017, 9:30 PM

benka

+ 2

How should i do to make this circle going square?

1st Aug 2017, 9:46 PM

gulkov misha

+ 2

thx i am just learning it

1st Aug 2017, 9:51 PM

gulkov misha

+ 2

Maybe trying to animate border-radius in css. Other thing (using SVG) is complicated, it involves transition to path/points (you need coordinates for each point). I think that css result is way easies than svg.

1st Aug 2017, 9:52 PM

Stamen

+ 1

Thank you for help!

1st Aug 2017, 9:29 PM

gulkov misha