Анимация SVG с помощью элементов animate, animateMotion, animateTransform

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Элементы <animate>, <animateMotion> и <animateTransform> позволяют создавать анимацию внутри SVG без использования JavaScript. Вы декларативно задаете параметры движения, вращения, масштабирования и других эффектов, задавая атрибуты прямо в разметке. Это удобно для простых анимаций, которые не требуют сложных сценариев.

Пример использования <animate> для изменения цвета заливки:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="fill" values="red;blue;red" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

Для перемещения объекта по траектории используют <animateMotion>:

<svg width="200" height="200">
  <circle cx="0" cy="100" r="10" fill="green">
    <animateMotion dur="4s" repeatCount="indefinite">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>
  <path id="path1" d="M0,100 C50,0 150,200 200,100" fill="none" stroke="gray" />
</svg>

Эти элементы работают в поддержку SMIL, что удобно для простых анимаций, но стоит помнить — некоторые браузеры с этим могут иметь ограничения или отключены.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.