The restart
attribute specifies whether or not an animation can restart.
You can use this attribute with the following SVG elements:
The restart
attribute specifies whether or not an animation can restart.
You can use this attribute with the following SVG elements:
<svg viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributeType="XML" attributeName="y" from="30" to="100" dur="5s" repeatCount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributeType="XML" attributeName="y" from="30" to="100" dur="5s" repeatCount="1" restart="whenNotActive" /> </rect> <a id="restart"><text y="20">Restart animation</text></a> </svg>
document.getElementById("restart").addEventListener("click", (evt) => { document.querySelectorAll("animate").forEach((element) => { element.beginElement(); }); });
Value |
always | whenNotActive | never
|
---|---|
Default value | always |
Animatable | No |
always
This value indicates that the animation can be restarted at any time.
whenNotActive
This value indicates that the animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.
never
This value indicates that the animation cannot be restarted.
Specification |
---|
SVG Animations Level 2 # RestartAttribute |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/restart