Элемент SVG <animateMotion>
Опубликовано: 25 Февраля, 2022
SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.
Элемент SVG <animateMotion> позволяет определять, как элемент перемещается по траектории движения.
Синтаксис:
<animateMotion values = "" dur = "" repeatCount = "" path = "" />
Атрибуты:
- keyPoints: этот атрибут указывает в диапазоне [0, 1], как далеко находится объект по пути для каждого значения, связанного с keyTimes.
- path: этот атрибут определяет путь движения.
- rotate: этот атрибут определяет вращение, применяемое к элементу, анимированному вдоль пути, обычно для того, чтобы он указывал в направлении анимации.
- Атрибуты анимации: атрибуты, используемые для создания эффектов анимации, атрибутов времени экспозиции, атрибутов событий, атрибутов значений и т. Д.
- Глобальные атрибуты: используются некоторые глобальные атрибуты, такие как основные атрибуты, атрибуты стиля и т. Д.
Пример:
Выход:
Поддерживаемые браузеры: этот элемент SVG поддерживает следующие браузеры:
- Хром
- Край
- Fire Fox
- Сафари
- Опера