Need insight on svg animations

Question

https://code.sololearn.com/WRIf69TTWrpF/?ref=app Why does the svg not move down the y axis in the same way that the other svg moves to the right?

Answer 1

The motion of the animation has nothing to do with it, the problem is that the animation goes beyond svg. Indicate the color svg to see in which range to work. And you don't need two svg, you can write many shapes in one svg. Also, there is no need to make svg too large if you bind it to only one object, (list), then both the size and position indicate the same.

Answer 2

<svg width="140px" height="160px" style="background-color:teal; position:fixed; top:40px; right:20px;">
<rect x="10" y="10"
width="10px" height="50px"
fill="darkblue" stroke="black">
<animate attributeName="y"
from"10px" to="50px" dur="1s"
fill="freeze" repeatcount="9"/>
<animate attributeName="fill"
from="darkblue" to="darkgrey"
dur="3s" fill="freeze"
repeatcount="9"/>
</rect>
<rect x="10" y="140"
width="50px" height="10px"
fill="indigo" stroke="black">
<animate attributeName="x"
from="10" to="50" dur="1s"
fill="freeze" repeatcount="9"/>
<animate attributename="fill"
from="indigo" to="grey"
dur="3s" fill="freeze"
repeatcount="9"/>
</rect>
</svg>

Answer 3

Thank you. This answer was very helpful