Keep SVG attribute at final value after animation

Question

I'm trying to animate a circle when an SVG is loaded. It should:

1. Initially load at a set, small size (radius of 1)
2. Begin after the set amount of seconds
3. Increase size to the set size (radius of 17)
4. Stay at this radius forever

Here is 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 can see it isn't working in either of them:

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

Can anyone shed any light on how to play the animation up until the end, then pause the animation, or is there a setting I'm 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 information.