SVG InlineAnimation SVG
Réaliser des animations avec le SVG Inline
L'élément animate
La balise animate est utilisée pour animer un seul attribut ou une seule propriété au cours du temps. Exemple de barre de chargement :
<svg height="50px" width="100%">
<rect width="100" height="50" fill="red">
<animate attributeName="width" attributeType="XML"
fill="freeze"
from="0" to="100%"
begin="0s"
dur="3s"
id="anim1"/>
</rect></svg>
<rect width="100" height="50" fill="red">
<animate attributeName="width" attributeType="XML"
fill="freeze"
from="0" to="100%"
begin="0s"
dur="3s"
id="anim1"/>
</rect></svg>
Explication :
attributName: spécifie l'attribut ou la propriété CSS à animer.attributType: spécifie le type de nœud à traiterfill: permet de geler l'animation arrivée à sa finfrom: la valeur de départ de l'animation ;to: la valeur finale à atteindre ;begin: l'instant de départ de notre animation;dur: la durée de notre animation;
Animation en cascade
L'effet de remplissage est ici déclanché par la fin de la barre de chargement (anim1)
<svg height="150px" width="150px">
<circle cx="55" cy="55" r="50" style="stroke:black; stroke-width: 1px;fill:orange;" >
<animate attributeName="fill" id="anim2" from="orange" to="red" begin="anim1.end" dur="3s"/>
</circle></svg>
<circle cx="55" cy="55" r="50" style="stroke:black; stroke-width: 1px;fill:orange;" >
<animate attributeName="fill" id="anim2" from="orange" to="red" begin="anim1.end" dur="3s"/>
</circle></svg>
AnimateTransform : déplacement d'objet
<svg height="150px" width="100%">
<rect width="100" height="100" style="fill:blue">
<animateTransform attributeName="transform" type="translate" from="-0,0" to="100,0" begin="0s" dur="2s" repeatCount="1" fill="freeze"/>
</rect>
</svg>
<rect width="100" height="100" style="fill:blue">
<animateTransform attributeName="transform" type="translate" from="-0,0" to="100,0" begin="0s" dur="2s" repeatCount="1" fill="freeze"/>
</rect>
</svg>
animateMotion
L'élément animateMotion permet de faire défiler un objet sur un path.
<svg height="250px" width="100%">
<path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:blue"/>
<g stroke="red" stroke-width="3" fill="black">
<circle id="pointA" r="3" />
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#chemin"/>
</animateMotion>
</g>
</svg>
<path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:blue"/>
<g stroke="red" stroke-width="3" fill="black">
<circle id="pointA" r="3" />
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#chemin"/>
</animateMotion>
</g>
</svg>
Note: g correspond au groupe d'objet - ici 1 seul objet, le circle
