animation - 动画后保持 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>

请参阅此处了解更多信息。

Answer 2

詹姆斯的回答是完全正确的，并且回答了我的问题——然而6 年后，我根本无法做到这一点。与 CSS 动画相比，CSS 动画似乎逐渐成为首选路线

<animation />

标签。同样的例子看起来像这样：

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