Open In App

SVG restart Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads