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" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <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" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <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> 