Dessiner avec SVG - sommaire

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" qui est affiché ci-dessous dans un Iframe:

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" <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox ="0 0 240 160"> <defs> <filter id="flou" > <feGaussianBlur stdDeviation="2" /> </filter> </defs> <g transform="translate(0,-138)"> <rect style="fill:black;" width="240" height="160" x="0" y="138" /> <ellipse style="fill:yellow;filter:url(#flou)" cx="129" cy="219" rx="20" ry="20" /> <path style="fill:none; stroke:none;" d="M 227,219 A 100,45 0 0 1 126.73,265 100,45 0 0 1 25,219 100.79,45 0 0 1 126,173 100,45 0 0 1 227,219 Z" id="orbite" /> <!-- code rajouté manuellement --> <image xlink:href ='terre.gif' width="10" height="10" > <animateMotion begin="0s" dur="24s" repeatCount="indefinite" > <mpath xlink:href ="#orbite" /> </animateMotion> </image> </g> </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.

Quand vous définissez un chemin avec la balise path, ce chemin est la valeur de l'attribut d.
Quand vous utilisez l'attribut path au sein de la balise animateMotion il n'y a pas de "d".

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 objets (rectangle & image) restent bien perpendiculaires au chemin (qui n'est pas dessiné)
Ci-dessous le code SVG interne correspondant : <svg width="90%" viewBox ="0 0 600 400" style ="background : navy;" > <path d="M 0,180 c 200,-100 400,100 600,0" id ="chemin" fill ="none" /> <path d="M 0,180 c 200,-100 400,100 600,0 v220 h-600 z" id ="route" fill ="gray" /> <path d="M 0,200 c 200,-100 400,100 600,0 v200 h-600 z" fill = 'darkseagreen' id ="pre"/> <rect fill ="black" width="60" height="30" > <animateMotion rotate="auto" begin="0s" dur="14s" repeatCount="indefinite"> <mpath xlink:href ="#chemin" /> </animateMotion> </rect> <image xlink:href ="autobus.png" width ="60" height ="30"> <animateMotion rotate="auto" begin="4s" dur="12s" repeatCount="indefinite"> <mpath xlink:href ="#chemin" /> </animateMotion> </image> </svg>

Nouveauté : attribut rotate dans l'élément animateMotion.
Notez bien l'imbrication des balises : mpath dans animateMotion et cette dernière dans rect ou image.