Accueil

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Dessins vectoriels avec SVG Les formes de base Les chemins - balise path Gestion du texte Insertion d'images - balise image Attribut viewBox, pourquoi ? Dégradés linéaires & radiaux, motifs, masques et découpes Modèle et clonage de modèle 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 CSS3 Deux jeux vidéos grâce à SVG-JS 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 & motifs & textes avec 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

Balise set 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. Feux tricolores - deuxième solution

Le code correspondant

Pour chaque rond, je manipule la propriété fill-opacity (j'aurai pu manipuler la propriété visibility).
J'anime d'abord le rond vert, puis le rond orange, puis le rond rouge et le cycle reprend !

Exemple 2

Un 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.

Concernant les noms des ID, 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 que je vous propose ci-dessous ne fonctionne pour l'instante que sous Chrome.
En effet je manipule via le CSS un paramètre géométrique (r). La spécification SVG2 prévoit que les paramètres géométriques pourront être manipulés tels des propriétés CSS.

Le code SVG

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

Le CSS

@keyframes grandir-foncer 
{
	0% {r:20 ; fill-opacity : 0.1; }
	25% {r:40 ; fill-opacity : 0.3; }
	50% {r:80 ; fill-opacity : 0.7; }
	100% {r:160 ; fill-opacity : 1; }
}
#rond {animation : grandir-foncer 12s 0s infinite steps(2,start) alternate; }

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 aient implémenté la version 2. Or ils ne semblent pas très préssés.

Animations avec SVG version 2