I tried to animate circle instead of rectangle.. I just make minor changes in the given example but it's not working

Question

plz share your knowledge if u know how to animate a circle

Answer 1

I'm still not diving in SVG and animations, but maybe these first few links found on google can may be useful:

https://css-tricks.com/guide-svg-animations-smil/

https://davidwalsh.name/svg-animation

http://dveloper.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
http://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Answer 2

Post your code, or a link to it ( and the example you're talking about ) to allow us to study them with you, if you want more tartgeted advises/help ;)

Answer 3

The same, with <circle> instead of <rect>:

<svg width="1000" height="250">
<circle r="100" cx="0" cy="125" fill="orange">
<animate attributeName="cx" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
</circle>
</svg>

My first mistake was to change name of opening tag, but not at ending tag </rect>...
And I gone look at reference to get the right attributs of <circle> element.
Do you have thought to adapt the attributes of <animate> child? The position did'nt have the same coordinates name for <rect> ;)

Answer 4

owh..tysm sir

Answer 5

I'll check it out..ty

Answer 6

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
here's that code of rectangle animation

Answer 7

it's working but if I replace rectangle attributes with circle ..it will not animate

Answer 8

ooowwhh I changed tags and all attributes but didn't change the animate's attribute
I mean I had to put cx in place of c ..thanku sir :)