html - 停止 SVG 文件的动画 - 包括代码片段

Question

我正在使用 SVG 图像并为图表的路径设置动画。它工作正常。但是，一旦绘制了图像，我就需要停止迭代(停止重绘图像)。代码可在附加的 CODEPEN 片段中找到 here .

我尝试从 CSS 文件的 animation 中删除 infinite，但绘制的图像被删除了。

我想做的是:

1.) 按照代码所示为图像设置动画。

2.) 停止动画重新激活(这是因为 animation 中使用了 infinite 属性)

3.) 图像绘制完成后，图像应保持不变，除非用户刷新页面。

Answer 1

改变这一行:

animation: draw 10s infinite linear;

为此:

animation: draw 10s forwards;

前向填充模式的工作原理如下:动画结束后(由 animation-iteration-count 确定)，动画将应用动画结束时的属性值