Retain SVG attribute at final value after animation

Question

I am trying to animate a circle while loading SVG. He must:

• Initially load into set, small size (radius 1)
• Start after a specified number of seconds
• Increase the size to the specified size (radius 17)
• Stay on this radius forever

That's what I'm doing:

<svg width="36px" height="36px"> <circle r="1" cy="18" cx="18"> <animate attributeName="r" from="1" to="17" dur="1s" begin="1s"></animate> </circle> </svg> 

But if you look at the result (and another option included in the link), you will see that it does not work in any of them:

http://codepen.io/sheepysheep60/pen/Hjfdo

Can someone shed some light on how to play the animation to the end, and then pause the animation, or is there some kind of setting that I am missing?

Answer 1

Use fill="freeze" :

 <svg width="36px" height="36px"> <circle r="1" cy="18" cx="18"> <animate attributeName="r" from="1" to="17" dur="1s" begin="1s" fill="freeze"></animate> </circle> </svg> 

See here for more details.

Answer 2

James's answer is absolutely correct, and he answered my question - however, 6 years later I didn’t do that at all. CSS animation is gradually becoming the preferred route over

 <animation /> 

tags The same example would look something like this:

https://codepen.io/EightArmsHQ/pen/bGbvaxx

 @keyframes grow{ to{ r: 16; } } circle{ animation: grow 3s forwards; svg:nth-child(2) &{ animation-delay: 1s; } svg:nth-child(3) &{ animation-delay: 2s; } }