rotate

Базовая доступность Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на множестве устройств и в различных версиях браузеров. Она доступна во всех браузерах с ⁨января 2020⁩ года.

Атрибут rotate задаёт, как анимируемый элемент вращается при движении по пути, указанному в элементе <animateMotion>.

Этот атрибут можно использовать со следующими элементами SVG:

<animateMotion>

Примечания по использованию

Значение	`auto` \| `auto-reverse` \| `<number>`
Значение по умолчанию	`0`
Анимируемый	Нет

Значения auto и auto-reverse позволяют динамически менять вращение анимируемого элемента при его движении по пути. Если значение rotate — auto, элемент поворачивается так, чтобы его правая сторона была направлена по текущему направлению движения. Если значение — auto-reverse, по текущему направлению движения поворачивается его левая сторона.

Если задать для rotate числовое значение, оно определит постоянный угол поворота в градусах, который не меняется во время анимации. Значение 0 по умолчанию сохраняет исходную ориентацию анимируемого элемента.

Примеры

SVG

<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>

Результат

Спецификации

Похоже, эта возможность не определена ни в одной спецификации.>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari для iOS	Samsung Internet	WebView Android	WebView для iOS
`rotate`	19	79	4	15	6	25	4	14	6	1.5	4.4	6

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/rotate