Анимация SVG с помощью CSS и SMIL

Презентационные атрибуты SVG (fill, stroke, opacity, transform) можно анимировать с помощью переходов CSS. Добавьте класс и задайте переход: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Переходы CSS работают с элементами SVG так же, как и с обычными элементами.

Применяйте @keyframes к элементам SVG: анимируйте stroke-dashoffset для эффекта прорисовки контура, opacity для плавного появления, а transform — для перемещения и вращения. Тот же синтаксис анимаций, который используется для элементов HTML, применяется к элементам SVG без изменений.

Приём со stroke-dasharray и stroke-dashoffset имитирует прорисовку контура: задайте dasharray равным длине контура, установите dashoffset равным длине контура, чтобы сделать контур невидимым, а затем анимируйте dashoffset до 0. В результате обводка как будто рисуется от начала до конца.

path.getTotalLength() возвращает длину контура в пользовательских единицах SVG. Используйте это значение и для stroke-dasharray, и для начального stroke-dashoffset. Благодаря этому анимация корректно работает независимо от сложности и длины контура.

Современные браузеры поддерживают CSS transform для элементов SVG. В элементах SVG transform-origin по умолчанию указывает на левый верхний угол SVG, а не на центр элемента, как в HTML. Укажите transform-box: fill-box, чтобы сделать transform-origin относительно ограничивающего прямоугольника элемента.

SMIL (язык интеграции синхронизированных мультимедиа) — встроенная система анимации SVG. Элемент animate изменяет значения атрибутов с течением времени. SMIL не требует JavaScript или CSS: анимации полностью задаются декларативно внутри разметки SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> вращает элемент вокруг указанной центральной точки с использованием синтаксиса SMIL.

<animateMotion> перемещает элемент вдоль контура SVG. Сошлитесь на контур с помощью mpath или встроенных данных контура. Элемент автоматически следует кривой контура, что удобно для сложных траекторий движения без ручного расчёта координат.

Анимации CSS поддерживаются всеми современными браузерами, интегрированы с каскадом CSS и позволяют проще управлять анимацией через JavaScript (приостанавливать и воспроизводить в обратном направлении). SMIL самодостаточен внутри разметки SVG, работает в статических файлах SVG без доступа к CSS и предоставляет декларативные выразительные средства для анимации вдоль контура.

Чтобы анимировать переход между двумя формами контура, контуры должны содержать одинаковое количество команд и иметь совместимую структуру. Анимация CSS изменяет свойство d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } обеспечивает встроенный морфинг контуров средствами CSS.

Добавьте медиазапрос prefers-reduced-motion, чтобы отключить или упростить анимации SVG для пользователей, которым движение доставляет дискомфорт. Декоративные анимации следует полностью отключать, а значимые анимации, например состояния загрузки, — упрощать, а не останавливать.

Как приём со stroke-dasharray и stroke-dashoffset создаёт анимацию прорисовки контура?

В анимации SVG используются переходы и покадровые анимации CSS для эффектов на основе свойств, приём со stroke-dasharray и stroke-dashoffset для прорисовки контуров, а также SMIL animate, animateTransform и animateMotion для декларативной анимации внутри SVG и prefers-reduced-motion для доступности. CSS и SMIL дополняют друг друга: выбирайте подход с учётом того, нужна ли SVG интеграция с каскадом CSS или автономность файла.