Основные атрибуты

Атрибут 'fill'

Дает возможность оставить эффект от анимации. По умолчанию, после окончания анимации, элемент принимает свой первоначальный вид, то есть никакого эффекта от применения анимации не остается. Атрибут fill позволяет исправить это.

Значения

freeze - Эффект анимации "замораживается" на оставшееся время существования SVG документа.

remove - эффект от анимации удаляется после того, как она закончится.

Атрибут 'restart'

Отвечает за перезагрузку анимации.

Бывают случаи, когда анимация может произойти в любое время и, кроме того, более одного раза (например, когда начало анимации определяется таким событием, как щелчок мышью над элементом). В некоторых случаях, при возникновении очередного события необходимо анимацию начать сначала, в других случаях мы захотим предотвратить такое поведение. За это и отвечает атрибут restart.

always - анимация может быть перезапущена в любое время

whenNotActive - анимация может быть перезапущена только когда она не активна. Попытки возобновить анимацию во время ее активности игнорируются.

never - анимация никогда не сможет быть перезапущена.

set

Set удобно применять вместо элемента <animate>, когда значение атрибута или свойства нужно изменить не плавно, а сразу, например, сделать элемент видимым.

<rect width="200" height="200" fill="slategrey">

<set attributeName="visibility" to="hidden" dur="5s"/> </rect>

<rect width="200" height="200" fill="slategrey">

<set attributeName="visibility" to="hidden" begin="1" end="3"/>

</rect>

Атрибуты set

attributeName - Определяет имя атрибута. attributeType - Определяет тип атрибута. begin - Определяет начало анимации. end - Определяет конец анимации.

repeatDur - Указывает общую продолжительность анимации.

repeatCount - Определяет количество повторений анимации.

fill - Дает возможность оставить эффект от анимации. calcMode - Задает режим интерполяции для анимации. dur - Определяет продолжительность анимации

animateMotion

Перемещает элемент по заданной траектории (пути).

Путь может быть описан несколькими способами: указание пар координат (x,y) для атрибутов 'from', 'to', 'by', которые будут определять движение по прямой линии. Координаты x и y разделяются между собой пробелом или запятой;

Указание пути в атрибутe path. Синтаксис у атрибута такой же, как и у атрибута 'd' элемента <path>. Так же можно использовать дочерний элемент <mpath>, который позволяет ссылаться на внешний путь.

<rect x="2" y="2" width="296" height="196" style="fill:#ffffff;stroke:#cbcbcb" stroke-width="2px" /> <circle cx="75" cy="60" r="15" >

<animateMotion begin="0s" dur="7s" repeatCount="indefinite"

path="m 0,0

c 0,0 -56,7 -53,32 3,24 20,62 46,69 26,6 66,-55 90,-53 23,2 18,43 38,55 16,9 59,-10 74,-38

14,-28 8,-85 -19,-96 z " /> </circle>

Элемент <mpath>

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

<animateMotion dur="6s"> <mpath xlink:href="#идентификатор"/> </animateMotion>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>A Circle</title>

<rect x="2" y="2" width="296" height="196" style="fill:#ffffff;stroke:#cbcbcb" stroke-width="2px" />

<path id="myPath" style="fill:none;stroke:#000000;stroke-width:1px;" d="M 65,53

c 0,0 -43,3 -21,24 21,21 9,33 39,17

C 113,79 136,43 122,88 109,134 77,151 54,140

c-22,-11 -29,18 11,21 40,3 56,10 72,-8 16,-18 13,-81 33,-34 20,47 20,85 37,49 16,-36 -19,-42 21,-41 41,0 53,15 40,-10

C 257,90 250,72 221,89 192,106 171,116 177,95

c6,-21 65,-27 82,-37 16,-10 30,-25 12,-23

-18,2 -67,23 -78,25 -10,2 -5,16 -31,5

C 135,53 128,47 117,38 105,28 98,13 81,24 63,34 64,49 65,53 z" /> <circle cx="0" cy="0" r="8" style="fill:red" >

<animateMotion dur="30s" repeatCount="indefinite"> <mpath xlink:href="#myPath"/>

</animateMotion>

</circle>

</svg>

animateTransform

Мы также можем использовать трансформации 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>