SVG rotate Attribute

The rotate attribute shows the rotation of an animated element as it travels along a specified path in an <animateMotion> element.

Syntax:

rotate = auto | auto-reverse | number

Attribute Values:

The rotate attribute accepts the values mentioned above and described below:

auto: This value allows the animated element's rotation to change dynamically as it travels along the path. In this, the element aligns itself to its right-hand side in the current direction of motion.
auto-reverse: This value allows the animated element's rotation to change dynamically as it travels along the path. In this, the element aligns itself to its left-hand side in the current direction of motion.
number: This value shows a constant rotation, that does not change with the animation.

The Below examples illustrate the use of the rotate attribute.

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <div style="color: green; 
            margin-left: 40px;">

        <h1>GeeksforGeeks</h1>

        <h4 style="color: black;">
            When rotate = 0 & auto
        </h4>

        <svg width="400" height="120" 
        viewBox="0 0 380 120" 
        xmlns="https://www.w3.org/2000/svg">

            <path d="M10,110 A120,120 -45 0,
                         1 110 10 A120,120 -45 0,
                         1 10,110" stroke="green"
                         stroke-width="2"
                         fill="none" id="geek" />

            <path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
                <animateMotion dur="6s" 
                repeatCount="indefinite" 
                rotate="0">
                    <mpath href="#geek" />
                </animateMotion>
            </path>

            <g transform="translate(100, 0)">
                <use href="#geek" />
                <path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
                    <animateMotion dur="6s" 
                    repeatCount="indefinite" 
                    rotate="auto">
                        <mpath href="#geek" />
                    </animateMotion>
                </path>
            </g>

        </svg>
    </div>
</body>

</html>

Output:

Example 2: