Остановить анимацию файла SVG - Включен фрагмент кода

Question

Я использую изображение SVG и анимирую путь диаграммы. Он работает нормально. Однако, как только изображение было нарисовано, мне нужно остановить итерацию (остановка с перерисовываемого изображения). Код находится в этом фрагменте кода CODEPEN приложенном here.

Я попытался удалить infinite из animation в файл CSS, но нарисованное изображение удаляется.

То, что я хочу сделать, это:

1.) анимировать изображение, как показано в коде.

2.) Остановить анимацию из реанимировать (это из-за атрибута infinite, используемого в animation)

3.) После того, как изображение было нарисовано, изображение должно оставаться на прежнем уровне, если пользователь не обновит стр.

Answer 1

Изменить эту строку:

animation: draw 10s infinite linear; 

к этому:

animation: draw 10s forwards; 

Нападающие режим заполнения работает следующим образом: После завершения анимации (определяется анимационной-итерационного подсчета), анимация будет применить значения свойств за время окончания анимации