ContextQMD
Back to Content

rotate

files/en-us/web/svg/reference/attribute/rotate/index.md

latest3.1 KB
Original Source

The rotate attribute specifies how the animated element rotates as it travels along a path specified in an {{SVGElement("animateMotion")}} element.

You can use this attribute with the following SVG elements:

  • {{SVGElement("animateMotion")}}

Usage notes

<table class="properties"> <tbody> <tr> <th scope="row">Value</th> <td> <code>auto</code> | <code>auto-reverse</code> | {{cssxref("number")}} </td> </tr> <tr> <th scope="row">Default value</th> <td><code>0</code></td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> </tbody> </table>

The auto and auto-reverse values allow the animated element's rotation to change dynamically as it travels along the path. If the value of rotate is auto, the element turns to align its right-hand side in the current direction of motion. If the value is auto-reverse, it turns its left-hand side in the current direction of motion.

Setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation. The default value of 0 keeps the animated element in its original orientation.

Examples

SVG

html
<svg
  width="400"
  height="120"
  viewBox="0 0 480 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Draw the outline of the motion path in grey -->
  <path
    d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
    stroke="lightgrey"
    stroke-width="2"
    fill="none"
    id="theMotionPath" />

  <!-- Red arrow which will not rotate -->
  <path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="0">
      <mpath href="#theMotionPath" />
    </animateMotion>
  </path>

  <g transform="translate(100, 0)">
    <use href="#theMotionPath" />
    <!-- Green arrow which will rotate along the motion path -->
    <path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(200, 0)">
    <use href="#theMotionPath" />
    <!-- Blue arrow which will rotate backwards along the motion path -->
    <path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(300, 0)">
    <use href="#theMotionPath" />
    <!-- Purple arrow which will have a static rotation of 210 degrees -->
    <path fill="purple" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="210">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>
</svg>

Result

{{EmbedLiveSample('Examples')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}