How do you pause a running SVG animation using <animateTransform>
element inside an SVG without losing the animation state?
Setting animation-play-state: paused;
on either the animating element, or the parent element has no effect. Changing the repeatCount from indefinite
to 0
, loses the animation state.
Kinda late, but here is how to do it in vanilla javascript: https://codepen.io/jjdewitt/pen/XJRqNK?editors=1010
You need to call
yourSvgElement.pauseAnimations();
on the SVG Element