animation - 动画后保持 SVG 属性为最终值

Question

我正在尝试在加载 SVG 时为圆圈设置动画。这应该:

最初以一组小尺寸(半径为 1)加载

在设置的秒数后开始

将大小增加到设置大小(半径为 17)

永远停留在这个半径

这是我在做什么:

<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>

但是，如果您查看结果(以及链接中包含的另一个选项)，您会发现它在其中任何一个中都不起作用:

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

任何人都可以说明如何播放动画直到最后，然后暂停动画，或者我缺少什么设置？

Answer 1

使用 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>

见 here想要查询更多的信息。