Accueil

Traduction

Dessiner avec SVG - sommaire

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 - Avenir du SMIL ?

Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform. Mais il y a aussi la balise set. Cette balise 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

@keyframes rouge {
  0% {fill-opacity: 1; }
  50% {fill-opacity: 1; }
  51% {fill-opacity: 0; }
  100% {fill-opacity: 0; }
}

@keyframes vert {
  0% {fill-opacity: 0; }
  50% {fill-opacity: 0; }
  51% {fill-opacity: 1; }
  90% {fill-opacity: 1; }
  91% {fill-opacity: 0; }
  100% {fill-opacity: 0;}
  }

@keyframes orange {
  0% {fill-opacity: 0; }
  90% {fill-opacity: 0; }
  91% {fill-opacity: 1; }
  100% {fill-opacity: 1; }
}
#rouge {animation: rouge 20s 0s infinite linear;}
#orange {animation: orange 20s 0s infinite linear;}
#vert {animation: vert 20s  0s infinite linear;}

Donc en pourcentages : durée du feu rouge : 50% (100% / 20 * 10), durée du feu 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

Le rond devient, mais par étapes, de plus en plus grand et de plus en plus opaque puis le cycle reprend.

Solution SMIL

La balise set est bien adaptée pour réaliser des changements saccadés. Un rond de plus en plus grand par

Le code SVG

Un viewBox de 400 par 400.

Les changements d'attributs sont préfixés "x" et les changements de propriétés CSS sont préfixées "c".

Solution CSS

La solution d'animation via CSS ne fonctionne que sous Chrome qui est seul navigateur a avoir implémenté (partiellement) la version 2 de SVG.
Dans cette nouvelle version de SVG, les paramètres géométriques tel r (rayon) peuvent être passés aussi en propriétés. Donc r peut être aussi manipulé dans un keyframes ...

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 la fonction "steps".

Avenir du SMIL

Chrome avait envisagé de déprécier SMIL de SVG mais est revenu sur cette décision.

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 l'ai montré ci-dessus.
Donc on pourra animer via le CSS ! ; le SMIL sera alors devenu obsolète mais encore faut-il que tous les navigateurs implémentent la version 2 ...

Animations avec SVG version 2