Trajectoires SVG : déplace une icône sur une courbe

Utilise animateMotion pour déplacer un élément SVG sur une trajectoire, et place un mpath à l’intérieur pour référencer un tracé existant. rotate="auto" fait tourner l’illustration mobile pour suivre le sens de la trajectoire. L’origine locale de l’illustration est le point qui parcourt le tracé : une icône importée nécessite donc un ancrage délibéré.

Cette méthode est utile lorsqu’une flèche personnalisée, un emblème ou une petite illustration doit se déplacer sans changer de forme. Pour une ligne qui semble se dessiner, utilise l’animation du contour. Pour transformer une silhouette en une autre, utilise le morphing de tracés. Ces techniques répondent à des besoins visuels différents.

Sépare la trajectoire de l’illustration

La trajectoire définit où l’icône se déplace. L’icône définit ce que voit le lecteur. La référence MDN de animateMotion décrit l’élément de mouvement, tandis que sa référence de mpath montre comment réutiliser un tracé par référence.

L’exemple original ci-dessous comporte une flèche bleu-vert et un point doré. La flèche pointe vers les X positifs, ce qui facilite l’examen de l’effet de rotation automatique. L’illustration est dessinée autour de (0, 0) plutôt que loin sur une grande zone exportée.

Enregistre ceci sous motion.html et ouvre-le dans un navigateur. L’emblème statique apparaît d’abord. Appuie sur Play pour lancer un passage de quatre secondes ; Show static rétablit l’illustration de départ.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

La courbe grise visible est un use distinct de la trajectoire. Retire ce use si le tracé doit être invisible ; conserve la définition dans defs pour que l’animation puisse toujours la référencer. L’élément de mouvement appartient au groupe dont la flèche et le point doivent se déplacer ensemble.

fill="freeze" conserve l’état final de l’animation. Il n’a aucun rapport avec la couleur bleu-vert de la flèche. Cet exemple ne s’exécute qu’une fois, ce qui rend sa position finale plus facile à vérifier qu’une boucle sans fin.

Corrige une icône qui flotte à côté de la trajectoire

Le mouvement s’applique au système de coordonnées de l’élément. Il ne trouve pas automatiquement le centre visuel d’un logo. Si tes tracés importés occupent des coordonnées autour de (200, 120), déplacer le groupe englobant sur une trajectoire laisse ce décalage à l’intérieur du groupe.

Choisis le point de l’illustration qui doit toucher la trajectoire, puis translate ce point vers (0, 0) à l’intérieur du groupe mobile. Pour un ancrage à (200, 120), la structure est :

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

La translation intérieure prépare l’illustration ; le groupe extérieur reçoit le mouvement. Garde ces fonctions séparées lorsque tu ajoutes une mise à l’échelle ou une rotation corrective. La spécification des animations SVG définit le mouvement comme une transformation supplémentaire : les transformations existantes influencent donc toujours le placement final.

Pour un badge, le centre peut être un ancrage pertinent. Pour un véhicule, tu peux préférer un point de contact d’une roue ; pour un pointeur, sa pointe. Le centre de la boîte englobante n’est qu’une première estimation. Examine le point de contact souhaité à plusieurs positions sur la trajectoire.

Une rotation sur place possède son propre problème de pivot. Le guide SVG de transform-origin explique ce cas sans ajouter de trajectoire de déplacement.

Choisis si l’illustration doit tourner

Ces valeurs sont décrites dans la référence MDN de la rotation du mouvement. auto-reverse change l’orientation ; il n’inverse pas l’ordre de parcours de la trajectoire.

Si ta source pointe vers le haut, auto ne sait pas que le haut signifie l’avant. Fais tourner un groupe intérieur de l’illustration jusqu’à ce qu’il pointe vers les X positifs, puis applique le mouvement au groupe extérieur. Évite de faire tourner la trajectoire elle-même uniquement pour corriger l’orientation locale de l’icône.

Des angles vifs dans la trajectoire peuvent produire des changements de direction brusques. Une trajectoire courbe est un meilleur point de départ si tu veux un virage visiblement fluide. Laisse aussi de la place autour de la trajectoire : une icône peut dépasser sa ligne médiane et être découpée près du bord de la zone d’affichage SVG.

Vérifie le départ, le milieu et l’arrivée

Nous avons ouvert la même trajectoire et le même emblème dans Chrome et utilisé un petit banc de test pour mettre la chronologie SVG en pause à 0, 2 et 4 secondes. L’icône partait en bas à gauche, passait près du sommet et terminait en bas à droite. Avec auto, son orientation changeait le long de la courbe. Avec une rotation de 0, la position à mi-parcours était inchangée tandis que la flèche restait horizontale.

Cette vérification concerne cet exemple dans un seul navigateur. Ce n’est pas un test d’importation d’animation dans les outils de design ni une garantie pour tous les modes d’intégration dans un navigateur.

Pour ta propre illustration :

1. Vérifie le point de contact au départ de la trajectoire. Corrige les décalages sources avant d’ajuster la durée.
2. Mets en pause près des virages et confirme que la partie souhaitée de l’emblème suit la ligne.
3. Compare rotation automatique et fixe. Choisis selon l’illustration, surtout si elle comporte du texte.
4. Vérifie que la position finale n’est pas découpée et que la relance démarre correctement.
5. Teste le contexte réel de livraison. Cet exemple utilise un SVG en ligne dans une page HTML avec des commandes JavaScript.

animateMotion utilise par défaut un déplacement à vitesse constante, comme le décrit MDN. La moitié de la durée représente donc approximativement la moitié de la distance parcourue, pas nécessairement le paramètre de courbe situé à mi-chemin entre ses points de contrôle. Sur notre trajectoire cubique asymétrique, la position à deux secondes se trouvait légèrement à droite du sommet géométrique.

Fournis une version statique utile

L’exemple commence par un use statique de l’emblème, et le mouvement ne démarre qu’après activation du bouton Play. Si JavaScript ne s’exécute pas, l’illustration statique reste visible. Lorsque la préférence de réduction des animations est active, le gestionnaire la laisse dans cet état.

La fonction média prefers-reduced-motion permet à la page de répondre à la préférence d’animation de l’utilisateur. Ici, JavaScript lit cette préférence avant de lancer le mouvement SVG et rétablit la version statique si elle change.

Nous avons aussi testé la branche statique avec un interrupteur explicite d’aperçu à animations réduites dans le banc de test : il masquait le groupe animé et affichait l’emblème au départ. Cet interrupteur testait notre logique de repli ; il ne modifiait pas le réglage d’accessibilité de l’ordinateur.

Garde si possible le sens du contenu indépendant de l’animation. L’utilisateur ne devrait pas devoir regarder un emblème mobile pour connaître un état ou lire des instructions essentielles. Pour une icône décorative à côté d’un texte déjà descriptif, adapte le libellé d’accessibilité pour éviter d’annoncer deux fois le même contenu.

Prépare ton motif avant de l’animer

Si ton motif personnalisé existe uniquement en PNG ou JPG, PerfectVector peut aider à reconstruire une illustration SVG modifiable avant de créer le mouvement. Examine la silhouette et les petites ouvertures reconstruites, groupe les parties qui doivent se déplacer ensemble et choisis l’ancrage. PerfectVector fournit la géométrie source ; la trajectoire, la durée et le comportement du mouvement sont définis séparément.

Un SVG existant peut passer directement au groupement et à la préparation de l’ancrage. Pour des flèches simples comme dans cette démonstration, dessiner directement la géométrie est aussi pratique. La présentation de la vectorisation d’images explique quand vectoriser une source matricielle est utile.

Pour un symbole personnalisé uniquement matriciel, essaie ton image dans PerfectVector, vérifie ses contours et ses petits détails, puis teste ce SVG au départ, au milieu et à l’arrivée de ta trajectoire. Conserve une version statique à côté de la version animée.

FAQ

Pourquoi mon icône se déplace-t-elle à côté du tracé plutôt que dessus ? L’illustration peut être décalée par rapport à son origine locale. Choisis le point qui doit suivre la trajectoire et translate-le à zéro dans le groupe mobile. Vérifie le résultat au départ et dans un virage.

La rotation automatique modifie-t-elle la forme de l’icône ? Non. Le mouvement change le placement et l’orientation de l’illustration. Il ne transforme pas la géométrie de ses tracés. L’avant de la source doit pointer vers les X positifs pour la rotation automatique de cet exemple.

Puis-je retirer la ligne guide visible ? Oui. Garde la définition de la trajectoire et son ID, mais retire l’élément distinct qui dessine la ligne guide. Le mouvement peut toujours référencer le tracé via mpath.

Sources

1. MDN animateMotion — Décrit les trajectoires, les valeurs de rotation et le déplacement à vitesse constante par défaut.
2. MDN mpath — Explique comment référencer une trajectoire existante dans l’élément de mouvement.
3. Spécification des animations SVG — Définit les transformations de mouvement et leur relation aux coordonnées de l’illustration.
4. MDN attribut rotate — Décrit les orientations de mouvement fixe, automatique et inversée.
5. MDN préférence de réduction des animations — Explique la détection de la préférence d’animation de l’utilisateur.