Элемент SVG <animateMotion>

Опубликовано: 25 Февраля, 2022

SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.

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

Синтаксис:

 <animateMotion values = "" dur = "" repeatCount = "" path = "" />

Атрибуты:

keyPoints: этот атрибут указывает в диапазоне [0, 1], как далеко находится объект по пути для каждого значения, связанного с keyTimes.
path: этот атрибут определяет путь движения.
rotate: этот атрибут определяет вращение, применяемое к элементу, анимированному вдоль пути, обычно для того, чтобы он указывал в направлении анимации.
Атрибуты анимации: атрибуты, используемые для создания эффектов анимации, атрибутов времени экспозиции, атрибутов событий, атрибутов значений и т. Д.
Глобальные атрибуты: используются некоторые глобальные атрибуты, такие как основные атрибуты, атрибуты стиля и т. Д.

Пример:

Выход:

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

HTML