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