<animateMotion>

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

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

Пример

html

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

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

Категории	Элемент анимации
Разрешённое содержимое	Любое количество следующих элементов в любом порядке: Описательные элементы `<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

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

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

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

Спецификация
SVG Анимации Level 2 # AnimateMotionElement

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

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

См. также

<mpath>

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