<animateMotion>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Элемент <animateMotion> вызывает перемещение ссылочного элемента вдоль пути движения.

Пример

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

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

Атрибуты

DOM интерфейс

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

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

Specification
SVG Animations Level 2 # AnimateMotionElement

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

BCD tables only load in the browser

Смотрите также

<mpath>