停止动画SVG文件 - 包含代码段

Question

我正在使用SVG图像并为图表的路径设置动画。它工作正常。但是，一旦绘制图像，我需要停止迭代（停止重绘图像）。该代码可在此附件here附带的CODEPEN代码段中找到。

我尝试从infinite文件中的animation删除CSS，但正在删除所绘制的图片。

我想做的是：

1。）如图所示为图像设置动画。

2。）停止动画重新动画（这是因为infinite中使用的animation属性）

3.。）绘制图像后，除非用户刷新页面，否则图像应保持不变。

Answer 1

更改此行：

animation: draw 10s infinite linear;

到此：

animation: draw 10s forwards;

转发填充模式的工作原理如下：动画结束后（由animation-iteration-count确定），动画将在动画结束时应用属性值