Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

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 animateMotion

Si vous voulez déplacer un objet SVG le long d'un chemin il faut utiliser la balise animateMotion.

Déplacement d'une forme simple le long d'un chemin

Le code SVG correspondant

La zone de dessin a pour "background" une image qui fait fonction de décor.

SVG : il faut déplacer un polygone le long d'un chemin donc la balise animateMotion contient l'attribut path et est contenue dans le conteneur polygon.
Ici la valeur de l'attribut path est une simple droite horizontale mais ça pourrait une courbe ...
L'avion ne surgit pas brutalement (à gauche) car le chemin a une longeur de 1000 et est plus large que la zone de dessin (800).

La balise mpath

La balise animateMotion peut contenir la balise mpath. Cette dernière balise fait référence à un chemin préalablement défini.
C'est ce que nous allons voir avec le fichier "soleil.svg".
Affichez le rendu de ce fichier

Le code du document SVG

La version brute de "soleil.svg" a été produit par Inkscape.
J'ai dessiné l'orbite de la terre via une ellipse. Mais l'argument de la balise mpath est obligatoirement un chemin ... Donc l'astuce consiste à convertir la forme ellipse en chemin.
Puis avec NotePad j'ai inséré une image gif (la terre) et j'ai ensuite demandé que cet objet se déplace sur le chemin elliptique.

Ci-dessous le code optimisé du document "soleil.svg"

Ce fichier contient un lien vers une image.
C'est pour cette raison qu'il est préférable d'insérer ce fichier avec l'élément OBJECT.

L'attribut rotate

La balise animateMotion peut contenir l'attribut rotate avec la valeur auto afin que l'objet qui se déplace le long d'un chemin soit toujours perpendiculaire à la pente.

Vous constatez que les deux rectangles restent bien perpendiculaires au chemin (trait noir).
Ci-dessous le code SVG interne correspondant :

Nouveauté : attribut rotate dans l'élément animateMotion.