Основы
Анимация SVG выполняется с помощью элемента <animate>:
<svg>
<rect width="200" height="200" fill="slategrey">
<animate attributeName="height" from="0" to="200" dur="3s"/>
</rect>
</svg>
Мы добавляем элемент <animate> внутрь элемента <svg>, который будем анимировать. Элемент <animate> содержит следующие атрибуты:
attributeName: здесь определяется атрибут, который будет участвовать в анимации.
from: опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to: данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeNameзначения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur: определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax. Например, 02:33соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом <circle>, но для него будет анимировать атрибут радиуса (r).
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="r" from="0" to="100" dur="3s"/>
</circle>
</svg>
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x и y:
<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>
В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу<animate>. Данный атрибут определяет как анимация будет действовать после завершения. В примере значениеfreeze вынуждает элемент оставаться там, где завершается анимация.
Также все действует и для элемента <circle>, но для него будем изменять атрибуты cx или cy:
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
</circle>
</svg>
Анимация нескольких атрибутов
Конечно, в элементе <animate> мы можем задавать изменения только для одного атрибута, но самих элементов<animate> мы можем определять несколько. Вот так, например:
<svg>
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
<animate attributeName="r" from="0" to="100" dur="3s"/>
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
</circle>
</svg>
Здесь мы анимируем для атрибута для элемента <circle> - радиус и ширину обводки.
Задаем траекторию перемещения
В одном из предыдущих уроков серии мы рассматривали как расположить текст по заданной линии. Также можно задавать анимацию элемента по заданной траектории:
<svg>
<defs>
<path id="thepath" fill="none" stroke="#000000"d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>
</defs>
<circle r="15" cx="15" cy="15" fill="slategrey">
</svg>
Траекторию лучше задавать с помощью элемента <defs>, как показано в примере. Чтобы векторный элемент следовал по траектории нужно определить анимацию с помощью элемента <animateMotion> и связать idтраектории с элементом <mpath>:
<animateMotion dur="3s">
<mpath xlink:href="#thepath"/>
</animateMotion>
Трансформации
Мы также можем использовать трансформации scale, translate и rotate для анимаций с помощью элемента <animateTransform>:
<svg>
<rect width="200" height="200" fill="slategrey">
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
</rect>
</svg>
Трансформации в SVG действуют по тому же принципу, что и в CSS3.
Заключение
С помощью описанных инструментов можно создавать различные эффекты и приложения. Например, такие, которые пока выглядят баловством, но скрывают в себе большой потенциал, особенно в условиях отступления Flash.