<animateMotion>

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

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

Элемент <animateMotion> SVG позволяет определять, как элемент перемещается вдоль траектории движения.

Примечание: Чтобы повторно использовать существующую траекторию, необходимо использовать элемент <mpath> внутри элемента <animateMotion> вместо атрибута path.

Контекст использования

Категории	Элемент анимации
Допустимое содержимое	Любое количество следующих элементов в любом порядке: Описательные элементы `<mpath>`

Атрибуты

keyPoints: Этот атрибут указывает в диапазоне [0,1], насколько далеко объект находится на траектории для каждого из соответствующих значений keyTimes. Тип значения: <number>*; Значение по умолчанию: отсутствует; Анимируемый: нет
path: Этот атрибут задаёт траекторию движения, используя тот же синтаксис, что и атрибут d. Тип значения: <string>; Значение по умолчанию: отсутствует; Анимируемый: нет
rotate: Этот атрибут задаёт поворот, применяемый к элементу, анимируемому вдоль траектории, обычно для того, чтобы он указывал в направлении анимации. Тип значения: <number> | auto | auto-reverse; Значение по умолчанию: 0; Анимируемый: нет

Примечание: Для <animateMotion> значением по умолчанию атрибута calcMode является paced.

Атрибуты анимации

Атрибуты синхронизации анимации: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
Атрибуты значений анимации: calcMode, values, keyTimes, keySplines, from, to, by
Другие атрибуты анимации: В частности: attributeName, additive, accumulate
Атрибуты событий анимации: В частности: onbegin, onend, onrepeat

Интерфейс DOM

Этот элемент реализует интерфейс SVGAnimateMotionElement.

Пример

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

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

Спецификация
Анимации SVG, уровень 2> # AnimateMotionElement>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`animateMotion`	19	79	4	≤12.1	6	25	4	≤12.1	6	1.5	4.4	6
`calcMode`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`fill`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`href`	50	79	51	37	12.1	50	51	37	12.2	5.0	50	12.2
`keyPoints`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`origin`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`path`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`rotate`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`systemLanguage`	19	79	12	≤12.1	6	25	14	≤12.1	6	1.5	4.4	6

См. также

<mpath>

© 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/Element/animateMotion