Accueil

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Le format SVG Les formes de base Les chemins Gestion du texte La balise image L'attribut viewBox pour des canevas 'responsives' Dégradés, motifs, masques et découpes Balises defs, use, g & symbol Les transformations Les filtres en SVG

Animations SVG

La balise animate du SMIL Compléments sur la balise animate Balise animateMotion du SMIL Balise animateTransform du SMIL Balise set - avenir du SMIL Animer via JavaScript Animer via CSS 3 Un jeu - le squash Comparaison SVG & Canvas

Le framework Snap SVG

Découverte du framework Plus loin avec Snap SVG Les filtres avec Snap SVG Les dégradés avec Snap SVG Chemins, masques & découpes en Snap SVG Animations avec Snap SVG - introduction Animations avec Snap SVG - enchainer, répéter à l'infini Animations avec Snap SVG - animations génériques - les événements Animations avec Snap SVG - progression de l'animation Animations en SVG 2 & CSS 3

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG & SMIL : la balise SET

Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform mais il y a aussi la balise set.

La balise set permet de fixer une valeur pendant un certain laps de temps.

Exemple 1

Le thème sera un feu tricolore qui doit successivement passer du vert à l'orange puis au rouge.
Soyez patient, comme vous l'êtes en tant que conducteur : le feu reste vert 10 s puis orange 3 sec et enfin rouge durant 7 s.

Première solution

Feux tricolores - première solution

L'ordre d'apparition des feux est ici faux. Le bon ordre est : vert - orange - rouge (et non pas rouge - orange - vert).

Le code SVG correspondant

Un viewBox de 400 par 200.

Pour chaque cercle je fais passer la propriété visibility de "hidden" à "visible".
Les animations "set" s'enchainent. La première animation de type "set" démarre à zéro mais aussi à la fin de la troisième ("a3").
Notez bien la syntaxe (déja vue) : begin="0s;a3.end"
Notez qu'avec la balise set, l'attribut from est absent ; la valeur de départ de la forme est défini dans la forme.

Notez que certains paramètres de position (x,cx) sont exprimés en pourcentage. C'est très pratique pour les cercles qui doivent être toujours centrés dans le canevas.

Deuxième solution en SMIL

L'ordre d'apparition des feux est correcte : vert, orange, rouge. Feux tricolores - deuxième solution

Le code correspondant

Pour chaque rond, je manipule la propriété fill-opacity à la place de la propriété visibility.
J'anime d'abord le rond vert, puis le rond orange, puis le rond rouge. Et le cycle reprend !

Il peut y avoir plusieurs canevas SVG dans une même page. Mais il ne peut y avoir deux objets ou animations ayant le même ID.
C'est pour cette raison que dans la solution 2 les ID commencent par "e" (alors qu'ils commencent par "a" dans la solution 1).

Solution CSS

On n'est pas obligé d'utiliser la balise set du SMIL Puisqu'on manipule une propriété de style (fill-opacity). On peut utiliser le CSS ! Feux tricolores - solution CSS

Le code SVG

Notez que j'ai identifié chaque cercle.

Le code CSS

Donc en pourcentages : durée du rouge : 50% (100% / 20 * 10), durée du vert : 40% , durée de l'orange : 10%.

Observez le modèle d'animation "rouge" qui s'applique au feu rouge :
de 0% à 50% il est opaque ; de 51% à 100% il est transparent.

Observez le keyframes "vert" qui s'applique au feu vert :
de 0% à 50% il est presque transparent ; de 51% à 90% il est opaque ; de 91% à 100% il est transparent.

Observez le keyframes "orange" qui s'applique au feu orange :
de 0% à 90% il est transparent ; de 91% à 100% il est opaque.

Ensuite il faut appliquer respectivement à chaque type de feu son modèle d'animation pour une durée de cycle de 20 secondes.
Si vous voulez que le feu reste rouge 20 secondes, vert 16 secondes et orange 4 secondes. Il suffit de remplacer dans les raccourcis animation "20s" par "40s".

Exemple 2

Solution SMIL

La balise set est bien adaptée pour réaliser des changements saccadés.
Ci-dessous le rond devient, mais par étapes, de plus en plus grand et de plus en plus opaque puis le cycle reprend. Un rond de plus en plus grand par

Le code SVG

Un viewBox de 400 par 400.

Les changements d'attributs XML sont préfixés "x" et les changements de propriétés CSS sont préfixées "c".
Dans cette page, nous n'avons donc pas de doublons dans les ID.

Solution CSS

Cette solution ne fonctionne pour l'instant que sous Chrome. Car ce navigateur a commmencé à implémenter la version 2 de SVG.
Dans cette nouvelle version de SVG, les paramètres géométriques tels r (rayon) peuvent être passés aussi en propriétés.

Le code SVG

Notez que j'ai passé en propriété un paramètre géométrique : r (rayon).

Le CSS

Dans un "keyframes" je manipule un paramètre géométrique : r (rayon) comme une propriété de style.
Pour obtenir un animation saccadée il faut utiliser comme rythme de l'animation ("animate-timing-function") la commande "steps".

Avenir du SMIL

Notez que dans le premier exemple on manipule des paramètres de style ("visibility" ou "fill-opacity") donc des propriétés CSS. Comme je vous l'ai montré on peut aussi animer via le CSS.

Par contre dans l'exemple 2, on manipule entre autres un paramètre géométrique : r (rayon du cercle). Or selon la spécification SVG 1, il est obligatoire de manipuler les paramètres géométriques comme des attributs.

Mais avec la version 2 de SVG, tous les paramètres géométriques de taille et de position (width,height,r,rx,ry,x,y,cx,cy) pourront être passés en propriétés comme je vous le montre ci-dessus.
Dans tous les deux cas, on pourra animer via le CSS ! ; le SMIL sera alors devenu obsolète.

Animations avec SVG version 2