SVG & SMIL : animation de courbes

Extrait du code HTML dans la partie HEAD

path{ stroke:black; stroke-width:4px; fill:none; } ... <meta http-equiv ="Refresh" content ="10" > ...

Notez la règle de style pour formater les chemins de la page.

La page est rechargée toutes les 10 secondes !

Chaque zone SVG contient 2 animations de 5 secondes qui s'enchainent. Et comme au bout de 10 secondes la page est rechargée alors la chaine d'animations se répète à l'infini.
Dans la page suivante vous verrez qu'il y à une solution plus élégante car le rechargement d'une page doit toujours être évitée.

Courbes quadratiques animées avec SMIL

Animation

L'oeil cligne : se ferme lentement puis s'ouvre lentement et le cycle reprend ...

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 400 200"> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path> <animate attributeName="d" from= "M 100,100 Q 200,0 300,100" to = "M 100,100 Q 200,30 300,100" attributeType ="XML" id ='a1' begin="0s" dur="5s"/> <animate attributeName="d" from= "M 100,100 Q 200,30 300,100" to = "M 100,100 Q 200,0 300,100" attributeType ="XML" begin="a1.end" dur="5s"/> </path> <path> <animate attributeName="d" from= "M 100,100 Q 200,200 300,100" to = "M 100,100 Q 200,170 300,100" attributeType ="XML" id ='a2' begin="0s" dur="5s" /> <animate attributeName="d" from= "M 100,100 Q 200,170 300,100" to = "M 100,100 Q 200,200 300,100" attributeType ="XML" begin="a2.end" dur="5s" /> </path>

Chaque balise path devient un conteneur (balise double) qui contient deux fois la balise animate. Il s'agit de deux animations qui durent chacune 5 secondes et qui s'enchainent.
Chaque animation porte sur l'attribut d.
Dans chaque conteneur pathles contenus des attributs from et to sont presque identiques. Seul l'ordonnée du point aimant change.
L'animation consiste en effet à rapprocher les ordonnées des points d'inflexion durant 5 secondes donc les courbes "s'aplatissent" puis à éloigner les ordonnées des points d'inflexion durant les 5 secondes suivantes donc les courbes se creusent.
Donc l'animation programmée par le fichier SVG dure 10 secondes. Mais comme au bout de 10 secondes la page est rechargée ...

Courbe de Bézier cubique animée en SMIL

Animation

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 300 300"> <path style ="fill : none ; stroke-width : 2 ; stroke : red ;" > <animate attributeName="d" attributeType ="XML" from= "M 0,150 C 100,0 200,300 300,150" to = "M 0,150 C 100,100 200,200 300,150" begin="0s" dur="5s" id = "a1"/> <animate ... from= "M 0,150 C 100,100 200,200 300,150" to = "M 0,150 C 100,0 200,300 300,150" begin="a1.end" dur="5s" /> </path> ...

Le conteneur path contient deux animations qui durent chacune 5 secondes et qui s'enchainent. La première identifiée a1 démarre au chargement de la page et la deuxième démarre dès que la première est terminée (begin = "a1.end").
Les deux animations portent sur l'attribut d.

La première animation consiste à "aplatir la courbe" car les ordonnées des points d'inflexion se rapprochent (de 0 à 100 pour le premier et 300 à 200 pour le second point).
La deuxième animation consister à creuser le courbe car c'est l'inverse : les ordonnées des points d'inflexion s'éloignent (de 100 à 0 pour le premier et 200 à 300 pour le second point).

Deux arcs d'ellipse animés avec le SMIL

Animation

Le code SVG

<svg height = 'auto' width = '50%' viewBox ="0 0 400 300" style ="border :1px solid black;" > <ellipse cx ="160" cy ="150" rx ="50" ry="20" fill ="none" stroke ="black" /> <path fill ="none" stroke ="red" stroke-width ="4"> <animate attributeName="d" attributeType ="XML" from = "M 110,150 A 50 20 0 1 1 210,150" to = "M 110,150 A 50 20 90 1 1 210,150" begin="0s" dur="5s" id = "a1"/> <animate ... from ="M 110,150 A 50 20 90 1 1 210,150" to = "M 110,150 A 50 20 0 1 1 210,150" begin="a1.end" dur="5s"/> </path> <path fill ="none" stroke ="green" stroke-width ="4"> <animate attributeName="d" attributeType ="XML" from = "M 110,150 A 50 20 0 0 0 210,150" to = "M 110,150 A 50 20 90 0 0 210,150" begin="0s" dur="5s" id = "a2"/> <animate ... from ="M 110,150 A 50 20 90 0 0 210,150" to = "M 110,150 A 50 20 0 0 0 210,150" begin="a2.end" dur="5s"/> </path> ...

Pour bien comprendre le code SVG de cette page je vous conseille de revoir auparavant la page sur les arcs elliptiques dans le tutoriel "Dessiner avec SVG".

Chaque animation consiste à modifier la valeur de l'attribut d de chaque chemin et plus précisément de faire varier la rotation de l'arc d'ellipse (troisième paramètre après A). L'angle passe de 0 à 90 puis dans une deuxième étape de 90 à 0.
Retour menu