Smil

Animation SVG avec SMIL (Synchronized Multimedia Integration Language)

DéfinitionAnimer l'attribut d'un élément

Balise : <animate>

Attributs :

attributeName : Le nom de l'attribut à animer.

from : La valeur initiale de l'attribut.

to : La valeur finale.

begin : début de l'animation (permet des départs différés)

dur : La durée de l'animation.

repeatCount : nombre de répétition ou indefinite

1
<svg width="300" height="200">
2
    <rect x="10" y="60" width="50" height="50" >
3
        <animate attributeName="x"
4
                 from="10"
5
                 to="300"
6
                 dur="5s"
7
                 repeatCount="indefinite" />
8
    </rect>
9
</svg>
SVG - SMIL

values : suite de valeurs

1
<svg width="300" height="200">
2
    <rect x="10" y="60" width="10" height="50" >
3
        <animate attributeName="width"
4
                 values="10;200;10;50;10"
5
                 dur="5s"
6
                 repeatCount="indefinite" />
7
    </rect>
8
</svg>
SVG - SMIL

Pour animer plusieurs attributs, ajoutez d'autres balises animate

DéfinitionAnimer les transformations

Balise : <animateTransform>

Attributs :

attributeName : transform.

type : translate, rotate, scale, skewX, skewY

from : La valeur initiale de l'attribut.

to : La valeur finale.

begin : début de l'animation (permet des départs différés).

dur : La durée de l'animation.

repeatCount : nombre de répétitions ou indefinite

1
<svg width="300" height="200">
2
    <rect x="50" y="80" width="50" height="50" >
3
        <animateTransform attributeName="transform"
4
                          type="rotate"
5
                          from="0 150 100"
6
                          to="360 150 100"
7
                          dur="5s"
8
                          repeatCount="indefinite" />
9
    </rect>
10
</svg>
SVG - SMIL

valeurs d'une rotation : from="40 30 30" correspond à rotation=40deg, coordonnées du centre de rotation x=30, y=30

DéfinitionAnimer suivant un tracé

Balise : <animateMotion>

Attributs :

path : Le chemin.

begin : début de l'animation (permet des départs différés).

dur : La durée de l'animation.

repeatCount : nombre de répétitions ou indefinite

rotate : angle de rotation de l'objet. La valeur auto fait modifier la rotation en fonction du chemin.

1
<svg width="300" height="200">
2
    <path d="M 20 30 C 300 50, 220 100, 190 110, 160 120, 100 50, 280 30" stroke-dasharray="5,10" stroke="black" fill="none"/>
3
    <path d="M-10 -10 L0 0 L-10 10 Z" stroke="red">
4
        <animateMotion path="M 20 30 C 300 50, 220 100, 190 110, 160 120, 100 50, 280 30"                          
5
                       dur="5s"
6
                       repeatCount="indefinite" />
7
    </path>
8
    <circle cx=20 cy=30 r=5 fill="red" />
9
    <path d="M 20 130 C 300 150, 220 200, 190 210, 160 220, 100 150, 280 130" stroke-dasharray="5,10" stroke="black" fill="none"/>
10
    <path d="M-10 -10 L0 0 L-10 10 Z" stroke="red">
11
        <animateMotion path="M 20 130 C 300 150, 220 200, 190 210, 160 220, 100 150, 280 130"                          
12
                       dur="5s"
13
                       rotate="auto"
14
                       repeatCount="indefinite" />
15
    </path>
16
    <circle cx=20 cy=130 r=5 fill="red" />
17
18
</svg>
SVG - SMIL