Dessiner avec SVG - sommaire

SVG & SMIL : la balise animateMotion

L'élément animateMotion permet de définir le mouvement d'un élément le long d'un chemin de motion, spécifié via l'attribut path ou via l'élément enfant mpath.

Utilisation de l'attribut path

Déplacement d'un rond rouge le long d'un chemin

Le rendu

Cliquez dans le canevas pour lancer l'animation.
L'animation en cours ne peut pas être redémarrée.

Le code SVG correspondant

Déplacement d'un rectangle vert le long du même chemin

Le rendu

Cliquez dans le canevas pour lancer l'animation.
L'élément suit toujours la tangente du chemin.

Le code correspondant

Notez l'attribut rotate ="auto" afin que le rectangle suive toujours la tangente du chemin.

La balise enfant mpath

La balise animateMotion peut contenir l'élément enfant mpath. Cette dernière balise fait référence à un chemin préalablement défini.

Rendu d'une image vectorielle animée

La terre tourne autour du soleil.

Ce document SVG comporte un lien vers une images ; il est inséré dans cette page web via la balise object ; j'aurai pu utiliser aussi l'élément iframe. .

Code produit par Inkscape

Le soleil est dessiné dans le canevas ; la terre est une image gif liée.
Ci-dessous un extrait du code après conversion de l'ellipse en chemin. ... <style> .ombrage{filter : drop-shadow(5px 5px 5px yellow) } </style> <ellipse style="fill:yellow;" cx="120" cy="80" rx="20" ry="20" id="soleil" class="ombrage" /> <image href="terre.gif" width="10" height="10" id="image1"> <animateMotion dur="24s" repeatCount="indefinite" begin="0s"> <mpath href="#orbite" /> </animateMotion> </image> <path id="orbite" style="fill:none" d="M 218.77551,83.918365 A 95.346939,55.619049 0 0 1 123.42857,139.53741 95.346939,55.619049 0 0 1 28.081635,83.918365 95.346939,55.619049 0 0 1 123.42857,28.299316 95.346939,55.619049 0 0 1 218.77551,83.918365 Z" /> ...

La version brute de ce document SVG a été produite avec Inkscape.
Avec ce logiciel j'ai dessiné une ellipse que j'ai identifié "orbite" et j'ai ensuite cette forme en chemin.

Ensuite via un éditeur de textes tel NotePad, j'ai complété le code SVG en rajoutant ce qui suit : <image href="terre.gif" width="10" height="10" > <animateMotion dur="24s" repeatCount="indefinite" begin="0s"> <mpath href="#orbite" /> </animateMotion> </image>

Notez la balise mpath dans l'élément parent animateMotion.

Utiliser Boxy SVG

Le rendu du document Boxy

Cliquez sur la fusée pour lancer l'animation.
J'ai du inséré ce document SVG avec la balise object afin que l'interaction avec le visiteur soit prise en compte.

Ma démarche

J'ai lancé Boxy SVG puis j'ai créé uun nouveau document et dessiné un canevas de 400 par 600 puis :
1. j'ai dessiné un rectangle ayant les dimensions du canevas que j'ai rempli d'un bleu nuit
2. j'ai dessiné la lune (rond jaune flouté)
3. j'ai dessiné une fusée (une ellipse et un triangle et j'ai uni les deux formes ; donc j'ai créé un chemin
4. j'ai sélectionné ce chemin et j'ai demandé une animation sur cet objet ; j'ai choisi dans la liste "se déplacer le long d'un chemin
5. J'ai édité graphiquement le chemin
6. j'ai renseigné les paramètres dans la boite de dialogue située à droite ; j'ai donc répondu aux questions suivantes : durée du cycle ? Répétition du cycle ? Commencer ? Redémarrez ?

Capture d'écran de l'interface Boxy SVG pour cette animation :

En pointillé le chemin que j'ai dessiné.