Marqueurs SVG : des pointes de flèche bien alignées

Pour attacher une pointe de flèche personnalisée à un tracé SVG, définis son dessin dans un <marker> et référence son ID avec marker-end. Définis refX et refY au point du dessin qui doit rejoindre l’extrémité du tracé. Choisis ensuite si le marqueur doit tourner avec le tracé et grandir avec sa largeur de contour.

Ces choix résolvent des problèmes différents. Une flèche peut pointer dans la bonne direction tout en manquant son extrémité. Elle peut aussi s’aligner correctement sur un contour fin, puis devenir trop grande lorsque la ligne s’épaissit. Cette méthode sépare placement, direction et taille avec une forme de flèche originale.

Commence par un petit SVG complet

Enregistre le code suivant sous markers.svg et ouvre-le dans un navigateur. La flèche est un exemple écrit à la main, avec sa pointe à (11, 6) dans un espace de coordonnées de 12 × 12. Ce n’est pas un résultat de conversion PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

Le premier tracé est droit ; le second est une courbe. Les deux référencent le même marqueur à leurs deux extrémités. Le bloc <defs> stocke la définition, tandis que les références des tracés la rendent visible. La référence MDN de marker couvre les propriétés d’attachement au début, au milieu et à la fin.

Utilise un ID unique dans le document contenant le SVG. Si tu combines plusieurs SVG en ligne, préfixe leurs ID de marqueurs et actualise chaque référence url(#...) correspondante. Le guide des sprites de symboles SVG explique le même problème de gestion des références pour les icônes réutilisées.

Place le point voulu à l’extrémité

refX="11" refY="6" indique quel point du dessin du marqueur doit coïncider avec l’extrémité du tracé. Cela ne déplace pas le tracé lui-même. Dans cet exemple, ce point est la pointe aiguë.

Compare avec refX="0" refY="0". Le navigateur place l’origine des coordonnées du marqueur à l’extrémité et laisse la pointe plus à droite et plus bas sur une ligne horizontale. Agrandir le marqueur rend l’erreur plus visible ; cela ne corrige pas l’ancrage.

MDN documente refX et refY comme coordonnées du point de référence du marqueur. Lis-les dans les coordonnées propres au dessin, y compris son viewBox, au lieu de les deviner à partir de sa largeur affichée.

Nous avons ouvert le SVG complet séparément et rendu la comparaison dans un navigateur. Modifier le point de référence a amené la pointe sur la croix orange. Modifier l’orientation a inversé la flèche de départ. Modifier le mode d’unités a contrôlé si la flèche grandissait avec la ligne. Ces observations concernent cet exemple ; inspecte le fichier exporté réel dans l’application qui le recevra.

Une pointe ancrée exactement à l’extrémité laisse aussi le contour se prolonger jusqu’à ce point. Sur une ligne épaisse, une partie du contour peut rester visible à côté d’une pointe étroite, comme le montre la comparaison. Si ce raccord compte, ajuste ensemble le motif, l’ancrage ou l’extrémité du tracé et inspecte la jonction. Le placement du marqueur ne raccourcit pas le contour sous-jacent.

Laisse la courbe contrôler la direction

Pour une pointe de flèche à la fin d’un tracé, orient="auto" suit la direction du tracé à ce point. La direction finale d’une courbe provient de sa tangente locale : la flèche n’a donc pas nécessairement la direction de la ligne droite reliant les deux extrémités du tracé.

Pour des flèches aux deux extrémités, utilise orient="auto-start-reverse". Cette valeur se comporte comme auto à la fin, mais tourne le marqueur de départ de 180 degrés supplémentaires. La documentation MDN de orient présente cela comme le moyen de réutiliser une pointe unique orientée vers l’extérieur aux deux extrémités.

La comparaison en haut à droite montre la différence : avec auto, la flèche de départ suit la courbe. Avec auto-start-reverse, elle pointe à l’opposé du départ. Tu n’as pas besoin d’une seconde copie de la forme inversée manuellement.

Vérifie la direction du tracé lorsque le résultat te surprend. Inverser un tracé change l’extrémité qui constitue son départ. Une flèche indiquant un flux doit être attachée selon cette direction, même si les deux extrémités occupent les mêmes positions d’écran qu’avant.

Décide si l’épaisseur de ligne doit changer la taille du marqueur

markerUnits définit le système de coordonnées utilisé pour les dimensions et le contenu du marqueur. Sa valeur par défaut est strokeWidth ; l’alternative est userSpaceOnUse. Consulte la référence MDN de markerUnits pour cette distinction.

La flèche couvre 10 des 12 unités horizontales de son viewBox. Avec markerWidth="6" et markerUnits="strokeWidth", sa largeur sans rotation est 10 / 12 × 6 × stroke-width : 20 unités utilisateur sur le contour de 4 unités et 40 sur celui de 8 unités. La comparaison en bas à gauche utilise ces réglages.

Pour conserver cette flèche à 20 unités de large aux deux épaisseurs, remplace la définition par :

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

La comparaison en bas à droite utilise ces valeurs. Conserver markerWidth="6" en changeant uniquement le mode d’unités produirait une flèche bien plus petite, car six unités ne seraient plus multipliées par la largeur du contour.

userSpaceOnUse ne signifie pas un nombre fixe de pixels d’écran. Redimensionner le SVG environnant ou son système de coordonnées peut encore modifier la taille affichée. Inspecte le marqueur à la taille finale de mise en page, particulièrement lorsqu’un grand motif est réduit en petite annotation de diagramme.

Prépare un motif personnalisé avant d’en faire un marqueur

Pour un triangle ou une flèche simple, dessine directement le tracé. Pour un dessin vectoriel existant, garde les tracés originaux et décide quelle coordonnée doit s’attacher à la ligne. Préserve les trous volontaires, simplifie les détails qui disparaissent à la taille prévue et donne assez d’espace au dessin dans la zone d’affichage du marqueur.

Si une pointe de flèche personnalisée ou un motif décoratif existe seulement en PNG ou JPG, la méthode image vers vecteur PerfectVector peut aider à reconstruire un SVG candidat avant cette étape de conditionnement. Compare la silhouette et les petites ouvertures à la source, supprime les formes de fond indésirables, puis choisis les limites et le point d’ancrage du dessin approuvé. La conversion ne crée pas de définitions de marqueurs, n’assigne pas la direction du tracé et n’ajoute pas de comportement de connecteur de diagramme.

Garde des couleurs explicites pendant les tests. Cet exemple utilise un marqueur bleu-vert et une ligne bleu marine pour garder leur limite visible. Si ta flèche doit être d’une couleur unique, définis délibérément les deux peintures et inspecte le résultat livré. Le guide de modification des couleurs SVG couvre les remplissages fixes et les styles qui peuvent gêner la recoloration.

Vérifie le fichier là où il sera utilisé

Conserve un original modifiable, puis teste une copie de livraison dans le site web, l’éditeur ou la méthode d’exportation réels. Un aperçu correct dans le navigateur établit l’apparence du fichier dans ce navigateur ; il ne démontre pas le comportement d’importation de toutes les applications.

• Confirme que chaque url(#...) pointe vers l’ID du marqueur prévu après conditionnement ou optimisation.
• Vérifie les tracés droits et courbes, y compris le marqueur de départ si tu en utilises un.
• Compare les épaisseurs de ligne les plus fines et les plus fortes du dessin.
• Inspecte la pointe, la jonction et les dessins éventuellement tronqués à la taille finale d’affichage.
• Rouvre le SVG livré indépendamment et compare-le à l’aperçu source.

Les marqueurs sont des décorations visibles attachées à des positions de tracé. Ils ne créent pas de connexions sémantiques entre les objets d’un diagramme. Pour les points de connexion et le comportement de gabarit propres à un éditeur de diagrammes, utilise son système de formes natif ; le guide des formes personnalisées draw.io couvre cette tâche distincte.

Un marqueur n’est pas non plus automatiquement un contour de découpe physiquement joint. Si la destination nécessite une géométrie de découpe fermée, prépare et inspecte une copie de livraison distincte à base de tracés dans un éditeur vectoriel. Une ligne et une pointe qui se chevauchent à l’écran ne prouvent pas que leur contour soit uni. D’autres guides de préparation SVG couvrent le nettoyage et les vérifications en aval.

FAQ

Pourquoi ma pointe de flèche SVG est-elle décalée de la ligne ? Vérifie refX et refY dans les coordonnées du dessin du marqueur. Ils identifient le point placé à l’extrémité du tracé. Dans cet exemple, la pointe est à 11,6 ; utiliser 0,0 y place plutôt l’origine.

Comment réutiliser une pointe aux deux extrémités ? Référence le même marqueur avec marker-start et marker-end et utilise orient="auto-start-reverse". L’instance de départ s’inverse tandis que celle de fin suit la direction du tracé.

Pourquoi ma pointe grandit-elle lorsque j’épaissis la ligne ? La valeur par défaut de markerUnits est strokeWidth. Utilise userSpaceOnUse lorsque le marqueur doit conserver sa taille dans les coordonnées utilisateur de l’élément, puis ajuste markerWidth et markerHeight pour ce système d’unités.

Un marqueur transforme-t-il la flèche en un tracé fermé unique ? Non. La définition du marqueur reste distincte du tracé qui la référence. Prépare et inspecte une véritable géométrie jointe si une méthode de découpe ou de modification en aval l’exige.

Sources

1. MDN — marker — Définitions de marqueurs, formes prises en charge et propriétés d’attachement.
2. MDN — refX — Placement horizontal du point de référence dans le système de coordonnées du marqueur.
3. MDN — refY — Placement vertical du point de référence dans le système de coordonnées du marqueur.
4. MDN — orient — Rotation automatique et inversion de l’instance de départ.
5. MDN — markerUnits — Taille relative au contour et taille en coordonnées utilisateur.

Commence avec un motif et vérifie son ancrage, sa direction et sa taille sur une ligne et une courbe. Si ton motif existe seulement sous forme matricielle, prépare un SVG candidat, inspecte sa silhouette et ses ouvertures, puis assemble les tracés acceptés en marqueur.