Таблица 11.1. Элементы вида анимации.
Элемент Описание
Анимация отдельного свойства элемента в течение определенного промежутка времени.
Задание изменения цвета элемента.
Анимация, в которой элемент двигается вдоль заданной траектории.
Анимация, в которой участвуют трансформации (преобразования).
Анимация дискретного изменения свойства.

Внутри этих элементов помещаются атрибуты, определяющие тип анимации. В табл. 11.2 приводится их описание.

Таблица 11.2. Атрибуты типа анимации.
Атрибут Описание
attributeName Указание свойства объекта, которое будет анимироваться. Например, для изменения цвета фигуры (заливки) атрибут будет выглядеть так: attributeName="fill"
attributeType Задание пространства имеет, указывающее тип атрибута. Возможные значения: CSS – анимация свойств, относящихся к спецификации CSS (Шрифт, цвет шрифта, кернинг и другие). XML – анимация свойства, относящегося к SVG – графике (Перенос, вращение, искажение и другие). auto – значение по умолчанию, включающее в себя значения свойств CSS и XML .

Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар " атрибут – значение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 11.3 приводится описание атрибутов анимации. Это общие атрибуты для всех элементов анимации.

Элемент animate

Элемент animate предназначен для анимации отдельного свойства объекта. Поскольку каждый объект может содержать большое количество свойств, то применение этого элемента позволяет создавать весьма разнообразные анимации. Рассмотрим следующий фрагмент кода:

Внутри тега rect элемента прямоугольник помещен элемент animate . В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attributeName="x" . Границы изменения (в пикселях) устанавливаются от нуля (from="0" ) до двухсот (to="200" ). По умолчанию, анимация начнется сразу после загрузки в браузер , и будет продолжаться в течении 10 секунд (dur="10s" ). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение (repeatCount=" indefinite " ). В табл. 11.4 приводятся примеры с использованием элемента animate.

Таблица 11.4. Элемент animate.
№ Код Вид в браузере
11.4.1

Лекция 11. Анимация Пример animate1.svg Листинг 11.4.1. Пример animate1.svg

Описание
Изменение абсциссы прямоугольника
№ Код Вид в браузере
11.4.2

Лекция 11. Анимация Пример animate2.svg Листинг 11.4.2. Пример animate2.svg

Описание
Изменение ординаты прямоугольника.
№ Код Вид в браузере
11.4.3

Лекция 11. Анимация Пример animate3.svg Листинг 11.4.3. Пример animate3.svg

Описание
Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали.
№ Код Вид в браузере
11.4.4

Лекция 11. Анимация Пример animate4.svg Листинг 11.4.4. Пример animate4.svg

Описание
Одновременное увеличение ширины и высоты прямоугольника.

В рассмотренных примерах мы видели изменение простейших свойств объекта – его координат, ширины и высоты.

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

  1. <object type = "image/svg+xml" data = "image.svg" >
  2. Your browser does not support SVGs
  3. </ object >

Трансформация SVG с помощью CSS

С помощью CSS можно менять цвет, размер, поворачивать, управлять временем анимации. Делать всё то, что делаем с элементами HTML страницы. Стили пишем в svg файл внутри тега