<marker> en SVG : la flèche qui se pose toute seule au bout d'un tracé

Sur un graphique dessiné en SVG, un axe se termine souvent par une flèche, et chaque point de donnée d'une courbe peut être marqué par un petit rond. Dessiner cette flèche ou ces ronds à la main, en recalculant leur position à chaque changement de valeur, devient vite intenable.

L'élément <marker> résout ce problème : il définit une petite forme réutilisable, que le navigateur pose et oriente automatiquement au début, au milieu ou à la fin d'un tracé, sans le moindre calcul manuel de position ou d'angle.

Définition

Un <marker> est un gabarit de forme, défini une fois dans <defs> avec un identifiant, puis attaché à un <path>, une <polyline> ou un polygone via l'une des trois propriétés marker-start, marker-mid et marker-end. Le navigateur place la copie du marqueur exactement sur le point concerné (premier point, chaque point intermédiaire, dernier point) et l'oriente selon la direction du tracé à cet endroit, sauf réglage contraire.

Attributs principaux

• markerWidth / markerHeight : la taille de la zone d'affichage du marqueur, 3 par défaut.
• refX / refY : le point du marqueur qui vient se poser exactement sur le point du tracé, essentiel pour qu'une flèche pointe pile à l'extrémité de la ligne plutôt qu'un peu à côté.
• orient : auto pour suivre l'angle du tracé, auto-start-reverse pour retourner le marqueur de départ (pratique sur une double flèche), ou un angle fixe en degrés.
• markerUnits : strokeWidth par défaut, la taille du marqueur suit alors l'épaisseur du trait.

Exemple de rendu concret

Une flèche au bout d'une ligne, construite avec une petite forme triangulaire posée en marqueur :

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="fleche" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
      <path d="M0,0 L10,5 L0,10 Z" fill="#2563eb" />
    </marker>
  </defs>
  <line x1="20" y1="50" x2="170" y2="50" stroke="#2563eb" stroke-width="3" marker-end="url(#fleche)" />
</svg>

Si la ligne change de direction ou de longueur, la flèche suit automatiquement : aucune coordonnée du marqueur n'a besoin d'être recalculée.

Différence avec <use>

Un <use> recopie un élément à une position que vous fixez vous-même avec x et y, sans lien particulier avec un tracé. Un <marker> ne se pose jamais tout seul : il ne s'active qu'attaché à un tracé, via marker-start, marker-mid ou marker-end, et hérite automatiquement de l'orientation du segment sur lequel il tombe. Pour une icône isolée posée à un endroit fixe du dessin, cet élément est le bon choix ; pour des flèches ou des points qui doivent suivre un tracé, seul le marqueur s'oriente tout seul.

Piège classique

Cas d'usage réel

Le marqueur sert typiquement à poser une flèche en bout d'axe sur un graphique en courbes, à afficher un petit cercle sur chaque point de mesure d'un capteur tracé en temps réel, ou à indiquer le sens de circulation sur un schéma de flux dessiné en SVG, sans jamais recalculer une seule position à la main.

FAQ

Oui, un <marker> peut contenir plusieurs éléments graphiques, exactement comme un petit SVG autonome : un cercle avec un contour, un triangle coloré, ou même du texte court, tant que l'ensemble tient dans le cadre défini par markerWidth et markerHeight.

C'est presque toujours un problème de refX et refY mal réglés, ou d'orient laissé à sa valeur par défaut sur un marqueur de départ : ajoutez orient="auto-start-reverse" pour que la flèche de début pointe vers l'extérieur du tracé plutôt que vers l'intérieur.

Non : un seul <marker> identifié par un id peut être référencé par marker-end sur autant de tracés que nécessaire, exactement comme une définition de couleur ou de dégradé partagée dans tout le document.