Look at the code below

Question

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="y" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>

here i want to make multiple rectangle along the x-axis and animate it. since i dont know the coordinates of the rectangle i could not make mutiple rectangle. how do i make more than one rectangle. plis do help

Answer 1

I literally just guessed by using the context of "y" being animated ... this appears to work:
<svg width="1000" height="250">
<rect x="250" width="150" height="150" fill="orange">
<animate attributeName="y" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
<rect x="10" width="150" height="150" fill="red">
<animate attributeName="y" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>

Answer 2

make a new rect tag

Answer 3

You need CSS I see.

Answer 4

even if i do... the rectangle sits on top of the other

Answer 5

thank you kirk