动画后将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>

有关详细信息，请参阅here。

Answer 2

詹姆斯的答案是完全正确的，并且回答了我的问题– 但是 6年后，这根本不是我要完成的任务。与之相比，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;
  }
}