Smil
Animation SVG avec SMIL (Synchronized Multimedia Integration Language)
Définition : Animer 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
<svg width="300" height="200">
<rect x="10" y="60" width="50" height="50" >
<animate attributeName="x"
from="10"
to="300"
dur="5s"
repeatCount="indefinite" />
</rect>
</svg>
values : suite de valeurs
<svg width="300" height="200">
<rect x="10" y="60" width="10" height="50" >
<animate attributeName="width"
values="10;200;10;50;10"
dur="5s"
repeatCount="indefinite" />
</rect>
</svg>
Pour animer plusieurs attributs, ajoutez d'autres balises animate
Définition : Animer 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
<svg width="300" height="200">
<rect x="50" y="80" width="50" height="50" >
<animateTransform attributeName="transform"
type="rotate"
from="0 150 100"
to="360 150 100"
dur="5s"
repeatCount="indefinite" />
</rect>
</svg>
valeurs d'une rotation : from="40 30 30" correspond à rotation=40deg, coordonnées du centre de rotation x=30, y=30
Définition : Animer 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.
<svg width="300" height="200">
<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"/>
<path d="M-10 -10 L0 0 L-10 10 Z" stroke="red">
<animateMotion path="M 20 30 C 300 50, 220 100, 190 110, 160 120, 100 50, 280 30"
dur="5s"
repeatCount="indefinite" />
</path>
<circle cx=20 cy=30 r=5 fill="red" />
<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"/>
<path d="M-10 -10 L0 0 L-10 10 Z" stroke="red">
<animateMotion path="M 20 130 C 300 150, 220 200, 190 210, 160 220, 100 150, 280 130"
dur="5s"
rotate="auto"
repeatCount="indefinite" />
</path>
<circle cx=20 cy=130 r=5 fill="red" />
</svg>