Как использовать SVG для создания веб-анимации под все типы устройств.

В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG .

Основы

Анимация SVG выполняется с помощью элемента :

Мы добавляем элемент внутрь элемента

attributeName : здесь определяется атрибут, который будет участвовать в анимации.

from : опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.

to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.

dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.

То же самое мы проделываем с элементом , но для него будет анимировать атрибут радиуса (r).

Перемещение элементов

Для перемещения SVG элементов нужно только указать координаты x и y:

В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу . Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.

Также все действует и для элемента , но для него будем изменять атрибуты cx или cy:

Анимация нескольких атрибутов

Конечно, в элементе мы можем задавать изменения только для одного атрибута, но самих элементов мы можем определять несколько. Вот так, например:

Здесь мы анимируем для атрибута для элемента - радиус и ширину обводки.

SVG графику можно анимировать, УРА, с помощью известного и горячо любимого CSS. Плюс к этому есть возможности самого svg описанные в спецификации SMIL Animation . Не забываем что возможности анимации зависят от способа, которым встроен svg на страницу. Наиболее полная поддержка идёт если встраиваете код непосредственно в html страницу или используя тег