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

Question

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

1. 最初加载一组,小尺寸(半径为1)
2. 在设定的秒数后开始
3. 将尺寸增加到设定尺寸(半径为17)
4. 永远留在这个半径

这是我正在做的事情:

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

有关更多信息,请参见此处