SVG restart Attribute
Last Updated :
31 Mar, 2022
The restart attribute is used to decide whether an animation will restart or not. The attribute is used by the <animate>, <animateColor>, <animateMotion>, <animateTransform> and <set> elements.
Syntax:
restart="always | whenNotActive | never"
Attribute Values: This attribute accepts three values as mentioned above and described below:
- always: It specifies that the animation can always be restarted.
- whenNotActive: It specifies that the animation can only be restarted when it is not active. If one tries to restart the animation during its active duration then those attempts are ignored.
- never: It specifies that the animation cannot be restarted for the time the document is loaded.
Below examples illustrate the use of this attribute:
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< div style = "color: green;" >
< h1 >GeeksforGeeks</ h1 >
< svg viewBox = "0 0 520 200"
< rect y = "30" x = "10" width = "60"
height = "60" fill = "green" >
< animate attributeName = "x"
from = "10" to = "50" dur = "1s"
repeatCount = "1"
restart = "always" />
</ rect >
< a id = "geeks" style = "cursor: pointer;" >
< text style = "font-size: 10px;" y = "10" >
On Clicking here, the
animation will restart
</ text >
< text style = "font-size: 10px;" y = "20" >
even if it is currently
in animation.
</ text >
</ a >
</ svg >
</ div >
< script >
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< div style = "color: green;" >
< h1 >GeeksforGeeks</ h1 >
< svg viewBox = "0 0 520 200"
< rect y = "30" x = "10" width = "60"
height = "60" fill = "green" >
< animate attributeName = "x"
from = "10" to = "50" dur = "1s"
repeatCount = "1"
restart = "whenNotActive" />
</ rect >
< a id = "geeks" style = "cursor: pointer;" >
< text style = "font-size: 10px;" y = "10" >
On Clicking here, the
animation will only
</ text >
< text style = "font-size: 10px;" y = "20" >
restart when it is not
currently active.
</ text >
</ a >
</ svg >
</ div >
< script >
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...