Dessiner avec SVG - sommaire

Animer des objets SVG via CSS

Si vous avez lu mon tuto (dans ce même site) sur CSS, vous savez que depuis la version 3 il est possible d'animer des éléments HTML. Sachez que vous pouvez aussi animer les objets SVG.

Un exemple basique pour commencer

Thème : un rond devient de plus en plus gros et de plus en plus opaque puis c'est l'inverse.
Il change aussi de couleur en passant du rouge au vert.

Solution envisagée

Le code SVG : <svg width ="50%" viewBox ="0 0 400 400" style ="background : yellow" > <circle cx="200" cy="200" r='10' id ="rond" /> </svg>

Le code CSS : @keyframes animer { 0% {fill-opacity:0.1; r : 10;} 50% {fill-opacity :1 ; r: 200 ;} 100% {fill-opacity:0.1; r : 10; } } #rond {animation : animer 20s 0s infinite linear;}

À chaque étape du "keyframes", je change l'opacité et la la valeur du rayon.
Ce code fonctionnera lorsque la version 2 de SVG sera implémentée par les navigateurs.
Il fonctionne déjà avec Chrome qui a implémenté partiellement SVG 2 !

Rappel : dans le cadre du SVG 1, les paramètres géométriques (r,cx,cy,rx, ry, width, height,etc.) doivent être passés obligatoirement en attributs (jamais en propriétés) !

Solution retenue

Comme seul Chrome comprend le code ci-dessus, je ne peux retenir cette solution pour le moment ; La bonne solution en l'état actuel des implémentations de SVG, consiste à mixer CSS et SMIL.

Le code SVG

La balise animate du SMIL doit gérer le rayon (paramètre géométrique). ... <circle cx="200" cy="200" r='10' id ="rond"> <animate attributeName="r" values="10;200;10" dur="20s" repeatCount="indefinite" /> </circle> ...

Le CSS

Le CSS se contente de modifier la valeur du paramètre de style fill-opacity. @keyframes animer { 0% {fill-opacity:0.1;} 50% {fill-opacity :1 ;} 100% {fill-opacity:0.1;} } #rond {animation : animer 20s 0s infinite linear;}

Animation CSS basée sur "transform:scale" ou "transform:rotate"

Attention aux transformations de type "scale" ou "rotate" dans le cadre d'une zone de dessin SVG qui peuvent s'accompagner aussi d'une translation si certaines précautions ne sont pas prises ...

Ci-dessous variation automatique de la taille d'un triangle

Le code SVG correspondant

Le code CSS correspondant

Attention !

Pour un objet SVG le point d'origine d'une transformation est le coin haut gauche du canevas. Dans ce contexte, tout changement d'échelle s'accompagne aussi d'une translation.
Donc si vous ne voulez qu'un simple changement de taille de l'objet il faut utiliser la propriété transform-origin avec comme valeur "center center" (OU "50% 50%") afin que l'origine de la transformation soit le centre du canevas.

La problématique est identique avec une rotation

Ci-dessous deux carrés : le premier pivote a partir du coin supérieur gauche de la zone de dessin et le second pivote autour du centre du canevas.
Valeur par défaut de transform-origin dans un contexte SVG : 0 0 c'est à dire le coin haut gauche de la zone de dessin.

Le code SVG : ... <svg width="50%" viewBox ="0 0 300 300"> <rect x="0" y ="0" width ="100" height ="100" fill ="olive" id ="rectangle1" /> <rect x="100" y ="100" width ="100" height ="100" fill ="red" id ="rectangle2" /> </svg> ...

Le code CSS : @keyframes pivoter { from {transform : rotate(0deg); } to {transform : rotate(90deg); } } #rectangle1 {animation : pivoter 4s 0s infinite linear alternate;} #rectangle2 {animation : pivoter 4s 0s infinite linear alternate; transform-origin : 50% 50%; }

Pour un élément HTML transform-origin fait référence à l'élément lui-même alors qu'en SVG cette propriété fait référence à la zone de dessin.
Pour un élément HTML, la valeur par défaut de cette propriété est "center center" donc le centre de l'élément lui-même
Pour un élément SVG, la valeur par défaut est "0 0" donc le coin haut gauche du canevas.

Un petit schéma vaut mieux qu'un long discours.

Animation de texte

Le code SVG

Le code CSS

La balise SVG étant un élémént HTML on peut lui appliquer un dégradé linéaire CSS.
Le texte change de direction à chaque cycle car dans la propriété animation il y a le paramètre alternate.

Une animation 3D

Ci-dessous un jet qui atterit sur la piste.

L'animation 3D correspond à un fichier SVG. Je vous communique le code de ce fichier ci-dessous.
Ce fichier SVG comprend non seulement du SVG mais aussi du CSS.

Le code du fichier "atterisage.svg"

Commentaire

Rappel : dans le cadre d'un fichier SVG (code SVG externe) les espaces de noms '"namespaces") xmlns="http://www.w3.org/2000/svg" & xmlns:xlink="http://www.w3.org/1999/xlink" sont obligatoires.

Le canevas SVG a pour "background" une image vectorielle qui a été produite avec Inkscape (piste.svg).

Le document SVG comprend une feuille de style avec un "keyframes" ; ce modèle d'animation est appliqué à l'objet SVG identifié "jet".
Cet objet "jet" est le clone d'un modèle défini et identifié "avion".

Insertion de l'image vectorielle animée dans cette page

Il faut utiliser la balise OBJECT pour insérer dans une page web un fichier SVG comprenant des liens vers d'autres images. <object type="image/svg+xml" data="atterrissage.svg" class ="grand"> </object>