Keep SVG attribute at final value after animation - animation

Question

I'm trying to animate a circle when an SVG is loaded. It should:
Initially load at a set, small size (radius of 1)
Begin after the set amount of seconds
Increase size to the set size (radius of 17)
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.

Answer 2

James' answer is totally correct, and answered my question – however 6 years later it isn't how I'd accomplish this at all. CSS animations seem to gradually be the preferred route compared to
<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;
}
}