SVG restart Attribute

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.

The 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="https://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="https://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:

Explore