Marcatore <marker> SVG

I tag SVG vengono utilizzati per l'inizio, la parte centrale e la fine di una riga di etichette o di un percorso. Ad esempio, si può utilizzare un etichetta circolare o quadrata come punto di partenza di un percorso, e un'etichetta a freccia come punto di arrivo di un percorso. L'elemento marker definisce l'arrow o il grafico di etichetta multi-piattaforma disegnati su un elemento specifico <path>, <line>, <polyline> o <polygon>

Esempio online di Marker

Questo è un esempio visivo semplice che mostra l'aspetto dei marcatori:

I marcatori vengono creati utilizzando l'elemento <marker>. L'elemento <marker> deve essere contenuto all'interno di un elemento <defs>. L'elemento <defs> di solito riserva un gruppo di definizioni riutilizzabili per l'immagine SVG.
Questo è il codice SVG dell'esempio di grafica superiore:

<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>

Prima di tutto, nota che l'elemento <defs> contiene due elementi <marker>. Questi due elementi <marker> definiscono i segni di inizio e fine visualizzati nell'immagine superiore.
In secondo luogo, presta attenzione a come l'elemento <path> utilizza gli attributi CSS mark-start e marker-end all'interno del suo attributo style per fare riferimento a due elementi <mark>. Questo è il modo in cui si specifica quale segno utilizzare per una determinata traiettoria. Ne parlerò più avanti.

　　　　
</marker>

Questo esempio definisce un segno di larghezza 8 (markerWidth=

L'attributo id dell'elemento <mark> viene utilizzato per fare riferimento a questo segno dall'elemento <path>.

Le coordinate refX e refY vengono utilizzate per impostare il punto all'interno del segno come punto di riferimento. Il punto di riferimento è il punto posizionato all'inizio della traiettoria utilizzando il segno. Nel presente esempio, refX e refY sono impostati al centro del cerchio, il che significa che il centro del cerchio verrà posizionato all'inizio della traiettoria. Se non vengono impostati refX e refY, vengono considerati 0, il che farà sì che l'angolo in alto a sinistra del segno si trovi all'inizio della traiettoria.

All'interno dell'elemento <marker> c'è un elemento <circle>. L'elemento circle è definito con un centro a (cx, cy) = (5, 5). Il punto centrale è il centro del riquadro virtuale del marcatore. Non è la posizione effettiva in cui viene posizionato nell'immagine. L'uso di markerWidth e markerHeight imposta la dimensione del riquadro virtuale all'interno dell'elemento <marker> a 8.8.

Orientamento automatico

Questo è un altro esempio di definizione di <marker>. Questo esempio definisce un triangolo utilizzato come freccia di percorso.

<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'elemento <path> all'interno dell'elemento <marker> disegna un triangolo con la punta che punta a destra. Tuttavia, se il percorso non è una linea orizzontale, è necessario ruotare il triangolo in modo che si adatti alla direzione del percorso utilizzato. Questo può essere fatto impostando l'attributo "orient" su "auto", che ruoterà la forma all'interno dell'elemento <marker> per adattarsi al percorso di riferimento.

L'immagine seguente mostra cinque linee con diverse pendenze, tutte utilizzano gli stessi due marcatore come marcatore di inizio e fine. Nota come i marcatore si orientano automaticamente per adattarsi alla pendenza della linea utilizzata.

Ecco come appare l'effetto:

Questo è il risultato di impostare l'attributo orient dell'elemento <mark> su auto.

Puoi anche impostare il valore dell'attributo orient su un angolo fisso (ad esempio, 45 gradi). Questo farà ruotare il marcatore di quell'angolo quando viene utilizzato. Tuttavia, questo è molto meno utile rispetto alla funzione di orientamento automatico.

Riferimento al marcatore dal percorso

Puoi utilizzare i seguenti attributi CSS per fare riferimento a un marcatore dal percorso:

• marker-start

• marker-mid

• marker-end

Questi tre attributi CSS assegnano un marcatore alla parte iniziale, centrale e finale del percorso.

Gli attributi CSS devono essere posizionati all'interno dell'attributo style dell'elemento <path> che li utilizza. Puoi fare riferimento all'elemento <marker> utilizzando il suo attributo id, come segue:

marker-start : url(#markerId);

markerId deve essere sostituito con il valore dell'attributo id dell'elemento <mark> di riferimento.

Questo è un esempio che utilizza tutti e tre gli attributi 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>

Il risultato della esecuzione è il seguente:

Citare i marcatori da altri shapes

L'elemento <path> non è l'unico elemento SVG che può utilizzare i marcatori. 　 Gli elementi <line>, <polyline> e <polygon> possono anche utilizzare i marcatori. Operano esattamente nello stesso modo dell'elemento <path>: attraverso l'indicazione dell'id dell'elemento <marker> nei属性的 marker-start, marker-mid e marker-end.

Unità di marcatori

È possibile impostare la dimensione dei marcatori in modo che si adatti alla larghezza della linea del percorso utilizzato. Ecco un esempio visivo:

Eseguendo impostare il valore di markerUnits dell'elemento <marker> su strokeWidth, è possibile ottenere questo effetto. Questo è effettivamente il valore predefinito di questa proprietà, quindi, anche se non si imposta l'attributo markerUnits, questo è il comportamento predefinito. Ecco come appare nel codice 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>

Per evitare di ampliare automaticamente il segno di spunta per adattarlo alla larghezza del tratto del percorso, impostare l'attributo markerUnits su userSpaceOnUse. In questo modo, il segno di spunta manterrà la sua dimensione indipendentemente dalla larghezza del tratto del percorso utilizzato.