0

I just made a simple SVG animation using the tag "animate" inside the SVG tag group. It works nicely BUT right after the animation is completed, it goes back to the beginning, to the initial frame, then stops.

How should I modify my code inside the animate tag in order to keep the animation still in the last frame? Thanks,

Ignacio Lirio Barajas
  • 1

1 Answers1

2

How should I modify my code inside the animate tag in order to keep the animation still in the last frame?

To achieve this use the fill =" freeze " attribute

Below is an example without using fill =" freeze "
As in your description - the figure returns to its original state

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >   
    
    <circle cx="30" cy="100" r="30" fill="purple" >
        <animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" />
    </circle>
</svg>

Second example using fill =" freeze " After the animation ends, the shape will remain in the last frame of the animation.

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >   
    
    <circle cx="30" cy="100" r="30" fill="purple" >
        <animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" fill="freeze" />
    </circle>
</svg>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54