Stefan Octavian Stefan Octavian - 2 months ago 23
HTML Question

svg animate tag changing

I am trying to make a rectangule in svg move down and them,when you tap it,to go to the right but it seems that it doesn't work.The console doesn't show any error.

Here is a JSFiddle:https://jsfiddle.net/troosfx8/

Answer

There is a much simpler solution than how you are attempting to do it above.

All you need to do is add another <animate> element that begins on a click.

<svg width="360" height="400"
     style="border:#9999ff dotted 7px; border-radius:12px;" >
    <rect id="Rect" x="70" y="70" width="50" height="50"
          style="stroke:yellow; stroke-width:5px; fill:orange;">
        <animate id="pos" attributeName="y" from="70" to="140" dur="1s"
                 repeatCount="none" fill="freeze"/>
        <animate id="pos" attributeName="x" from="70" to="140" dur="1s"
                 repeatCount="none" fill="freeze" begin="click"/>
    </rect>
</svg>