Элемент SVG <animateMotion>

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

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

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

Синтаксис:

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

Атрибуты:

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

Пример:

Выход:

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

  • Хром
  • Край
  • Fire Fox
  • Сафари
  • Опера