Une icône d’enveloppe qui suit une trajectoire courbe sur une page d’accueil, un point qui parcourt un itinéraire sur une carte stylisée, un logo qui glisse le long d’une vague dessinée à la main : dans tous ces cas, l’élément animé ne se déplace pas en ligne droite entre deux points, il suit un tracé précis. C’est exactement le rôle de <animateMotion>, qui fait avancer un élément SVG le long d’un chemin plutôt que de simplement interpoler ses coordonnées x et y.
Sans cet élément, il faudrait recalculer à la main, position par position, les coordonnées d’un élément pour lui faire suivre une courbe, un calcul vite fastidieux dès que le tracé n’est plus une ligne droite. <animateMotion> délègue ce calcul au moteur de rendu du navigateur, qui connaît déjà la géométrie exacte du chemin fourni.
Définition
<animateMotion> est un élément d’animation SMIL qui déplace son élément parent le long d’un tracé. Deux façons de fournir ce tracé existent : l’attribut path, qui contient directement une chaîne de commandes de dessin au même format que l’attribut d d’un <path>, ou un sous-élément mpath, qui référence par identifiant un tracé existant ailleurs dans le document, y compris un tracé placé dans une zone jamais affichée, comme à l’intérieur d’un <defs>. À la différence de <animate>, il n’anime pas un attribut nommé : il pilote directement la position de l’élément sur le canevas.
Attributs principaux
| Attribut | Rôle |
|---|---|
path | Chaîne de commandes de tracé inscrite directement dans l’attribut, au même format que d. |
mpath | Sous-élément qui référence, via son identifiant, un tracé déjà présent ailleurs dans le document. |
rotate | auto oriente l’élément dans le sens du tracé, auto-reverse l’oriente à l’envers, une valeur fixe applique une rotation constante. |
dur | Durée totale du parcours, par exemple 2.5s. |
keyPoints / keyTimes | Contrôlent la vitesse le long du tracé, par exemple pour ralentir dans les virages. |
repeatCount | Nombre de répétitions du parcours, ou indefinite pour une boucle sans fin. |
Exemple de rendu concret
Voici une icône représentée par un <polygon> en forme de flèche, qui glisse le long d’une courbe en douceur grâce à un <mpath> référençant un tracé tout proche.
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path
id="trajectoire"
d="M10,80 C60,10 140,10 190,80"
fill="none"
stroke="#cbd5e1"
stroke-width="2"
/>
<polygon points="-6,-5 8,0 -6,5" fill="#2563eb">
<animateMotion dur="2.5s" repeatCount="indefinite" rotate="auto">
<mpath href="#trajectoire" />
</animateMotion>
</polygon>
</svg>Différence avec <animateTransform>
Il est tentant de confondre <animateMotion> avec <animateTransform> réglé sur type="translate", mais les deux ne couvrent pas le même besoin. Une translation animée avec <animateTransform> déplace un élément en ligne droite entre un point de départ et un point d’arrivée, ce qui suffit pour un simple glissement horizontal ou vertical. <animateMotion>, lui, sait suivre un tracé courbe, avec des virages, des accélérations et des ralentissements définis par la géométrie même du chemin fourni. Pour une icône qui doit suivre une route sinueuse sur une carte ou onduler comme une vague, seul <animateMotion> convient.
Piège classique
Le piège le plus courant consiste à oublier rotate="auto" : sans cet attribut, l’élément conserve toujours la même orientation pendant tout le déplacement, ce qui donne l’impression étrange qu’une flèche glisse de travers au lieu de pointer dans le sens de la marche. Un second piège touche au sous-élément mpath : la référence doit pointer vers un <path> existant dans le document via son identifiant, précédé d’un dièse, et une simple faute de frappe dans cet identifiant fait échouer silencieusement toute l’animation, sans aucun message d’erreur visible dans la console.
rotate="auto", l’élément animé garde une orientation figée du début à la fin du parcours, même si le tracé qu’il suit multiplie les virages.Cas d’usage réel
Une icône d’enveloppe qui glisse le long d’une courbe pour illustrer l’envoi d’un message sur un écran d’accueil. Un point qui parcourt un itinéraire tracé sur une carte stylisée pour visualiser un trajet de livraison en temps réel. Une petite étoile qui suit une trajectoire ondulée derrière un titre pour donner un peu de vie à une page marketing, sans recourir à une bibliothèque JavaScript dédiée à l’animation.
<animateMotion> doit-il obligatoirement être visible à l’écran ?Non, le tracé de référence peut très bien être défini dans une zone jamais affichée du document, par exemple à l’intérieur d’un <defs>, ou porter simplement un attribut fill="none" et aucun stroke pour rester invisible tout en continuant de guider le déplacement.
<animateMotion> avec une rotation supplémentaire indépendante du tracé ?Oui, il suffit d’ajouter un second élément <animateTransform> de type rotate en plus de <animateMotion> sur le même élément : les deux animations se cumulent, puisqu’elles ne portent pas sur le même mécanisme de déplacement.
path et le sous-élément mpath ?L’attribut path inscrit directement les commandes du tracé dans l’élément <animateMotion>, ce qui est rapide pour un tracé simple et unique. Le sous-élément mpath référence à la place un <path> déjà présent dans le document, ce qui évite de dupliquer les coordonnées si plusieurs éléments doivent suivre exactement le même chemin.