Marqueur <marker> dans SVG

Les balises SVG sont utilisées pour le début, le milieu et la fin des lignes ou des chemins. Par exemple, un cercle ou un carré peut être utilisé comme marqueur de début pour un chemin, et une flèche peut être utilisée comme marqueur de fin pour un chemin. L'élément marker définit les flèches ou les graphiques de marqueurs multiples dessinés sur des éléments spécifiques <path>, <line>, <polyline> ou <polygon>.

Exemple en ligne de marqueur

Voici un exemple visuel simple montrant l'apparence des marqueurs:

Les marqueurs sont créés à l'aide de l'élément <marker>. L'élément <marker> doit être imbriqué à l'intérieur d'un élément <defs>. L'élément <defs> est généralement utilisé pour réserver un ensemble de définitions réutilisables pour l'image SVG.
Voici le code SVG de l'exemple de graphique ci-dessus:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle cx="5"cy="5"r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,11　L10,6　L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10　L150,10　L150,60" style="stroke: #6666ff; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">/path>
</svg>

Veuillez d'abord noter que l'élément <defs> contient deux éléments <marker>. Ces deux éléments <marker> définissent les marqueurs de début et de fin affichés dans l'image ci-dessus.
Deuxièmement, notez comment l'élément <path> utilise mark-start et marker-Les attributs start et end CSS font référence à deux éléments <mark>. Voici comment spécifier les marqueurs à utiliser pour un chemin donné. Je reviendrai sur ce sujet plus tard.

Définir un marqueur

Vous pouvez définir un marqueur en utilisant l'élément <marker>. Voici un exemple :

<marker id="markerCircle" markerWidth="8"markerHeight="8"refX="5"refY="5">
　　　　<circle cx="5"cy="5"r="3"style="stroke: none; fill:#000000;"/>
</marker>

Dans cet exemple, un largeur de8(markerWidth=“8) de hauteur8(markerHeight=“8) est un marqueur. Comme le marqueur est un élément graphique séparé, il est nécessaire de définir explicitement sa largeur et sa hauteur.

L'attribut id de l'élément <mark> est utilisé pour faire référence à ce marqueur à partir de l'élément <path>.

Les coordonnées refX et refY définissent le point à l'intérieur du marqueur qui sert de point de référence. Le point de référence est le point utilisé pour positionner le marqueur au début du chemin. Dans cet exemple, refX et refY sont définis sur le centre du cercle, ce qui signifie que le centre du cercle sera placé au début du chemin. Si refX et refY ne sont pas définis, ils sont supposés être à 0, ce qui placera le coin supérieur gauche du marqueur au début du chemin.

À l'intérieur de l'élément <marker> se trouve un élément <circle>. L'élément circle est défini pour5,5centré au point (cx et cy). Le point central est le centre du cadre virtuel du marqueur. Ce n'est pas la position réelle où il est placé sur l'image. Utilisez markerWidth et markerHeight pour définir la taille du cadre virtuel dans l'élément <marker>.8.8.

Orientation automatique

Voici un autre exemple de définition de marqueur. Dans cet exemple, un triangle est défini comme flèche de chemin.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"width="5"height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13"markerHeight="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

L'élément <path> du marqueur dessine un triangle pointant vers la droite. Cependant, si le chemin n'est pas une ligne horizontale, il est nécessaire de pivoter le triangle pour qu'il s'adapte à la direction du chemin qu'il utilise. Cela peut être fait en définissant l'attribut 'direction' (orient) sur 'automatique' (auto). Cela fait pivoter la forme à l'intérieur de l'élément <marker> pour qu'elle s'adapte au chemin référencé.

Les images suivantes montrent cinq lignes avec différentes pentes, toutes utilisant les deux mêmes marqueurs comme marqueurs de début et de fin. Notez comment les marqueurs pivotent automatiquement pour s'adapter à la pente des lignes qu'ils utilisent.

Voici le résultat de l'exécution :

Voici le résultat de la définition de l'attribut orient de l'élément <mark> sur auto.

Il est également possible de définir la valeur de l'attribut orient sur un degré fixe (par exemple45Cela fait pivoter le marquage de ce degré lors de son utilisation. Cependant, cela est bien moins utile que la fonction d'orientation automatique.

Référence de marqueurs à partir de chemins

Vous pouvez utiliser les attributs CSS suivants pour référencer un marqueur à partir d'un chemin :

• marker-start

• marker-mid

• marker-end

Ces trois attributs CSS assignent un marqueur aux points de départ, milieu et fin du chemin.

Les attributs CSS doivent se trouver dans l'attribut style de l'élément <path> qui les utilise. Vous pouvez référencer l'élément <marker> en utilisant son attribut id, comme suit :

marker-start : url(#markerId);

markerId doit être remplacé par la valeur de l'attribut id de l'élément <marker> à référencer.

Voici un exemple utilisant les trois propriétés CSS :

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"width="5"height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13"markerHeight="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

Le résultat de l'exécution est le suivant :

Référence de marqueurs à partir d'autres formes

L'élément <path> n'est pas le seul élément SVG qui peut utiliser des marqueurs. 　 Les éléments <line>, <polyline> et <polygon> peuvent également utiliser des marqueurs. Ils fonctionnent de la même manière que l'élément <path> : en utilisant le début du marqueur, le milieu du marqueur et la fin du marqueur (respectivement : marker-start, marker-mid et marker-Référence l'attribut id de l'élément <marker> dans l'attribut CSS end.

Unités de marqueur

Il est possible de régler la taille des marqueurs de manière à ce qu'ils s'adaptent à la largeur de la ligne du chemin pour lequel ils sont utilisés. Voici un exemple visuel :

En fixant la valeur de markerUnits de l'élément <marker> sur strokeWidth, on peut réaliser cet effet. Il s'agit en fait de la valeur par défaut de cette propriété, donc, même si vous n'avez pas configuré l'attribut markerUnits, c'est le comportement par défaut. Voici à quoi ressemble le code SVG :

<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4"
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1"y="1"width="5"height="5"style="stroke: none; fill:#000000;"/>
</marker>

Pour éviter l'auto-étalonnage des marqueurs pour les adapter à la largeur de l'épaisseur du trait du chemin, définissez l'attribut markerUnits sur userSpaceOnUse. De cette manière, le marqueur conservera sa taille indépendamment de la largeur de l'épaisseur du trait du chemin qu'il utilise.