Marcatori SVG: creare punte di freccia allineate

Per collegare una punta di freccia personalizzata a un tracciato SVG, definisci la grafica dentro un <marker> e fai riferimento al suo ID con marker-end. Imposta refX e refY sul punto della grafica che deve incontrare il punto finale del tracciato. Poi scegli se il marcatore deve ruotare con il tracciato e crescere con lo spessore del tratto.

Queste scelte risolvono problemi diversi. Una freccia può puntare nella direzione giusta e comunque non coincidere con il punto finale. Può anche allinearsi correttamente su un contorno sottile, poi diventare troppo grande quando la linea si ispessisce. Questa guida separa posizione, direzione e dimensioni usando una forma di puntatore originale.

Parti da un SVG piccolo e completo

Salva quanto segue come markers.svg e aprilo in un browser. Il puntatore è un esempio scritto a mano, con punta a (11, 6) dentro uno spazio di coordinate di 12 × 12. Non è un risultato di conversione 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>

Il primo tracciato è dritto; il secondo è una curva. Entrambi fanno riferimento allo stesso marcatore a entrambe le estremità. Il blocco <defs> conserva la definizione, mentre i riferimenti dei tracciati la rendono visibile. La documentazione MDN di marker descrive le proprietà di collegamento all'inizio, al centro e alla fine.

Usa un ID univoco nel documento contenitore. Se combini diversi SVG inline, aggiungi un prefisso ai loro ID dei marcatori e aggiorna ogni riferimento url(#...) corrispondente. La guida agli sprite di simboli SVG spiega lo stesso problema di gestione dei riferimenti per icone riutilizzate.

Metti il punto previsto sul punto finale

refX="11" refY="6" indica quale punto della grafica del marcatore deve coincidere con il punto finale del tracciato. Non sposta il tracciato stesso. In questo esempio quel punto è la punta acuta.

Confrontalo con refX="0" refY="0". Il browser posiziona l'origine delle coordinate del marcatore sul punto finale, lasciando la punta più a destra e più in basso su una linea orizzontale. Aumentare le dimensioni del marcatore rende l'errore più visibile; non corregge l'ancoraggio.

MDN documenta refX e refY come coordinate del punto di riferimento del marcatore. Leggile rispetto alle coordinate della grafica stessa, incluso il viewBox, anziché dedurle dalla larghezza visualizzata.

Abbiamo aperto separatamente l'SVG completo e renderizzato il confronto in un browser. Cambiare il punto di riferimento ha portato la punta sulla croce arancione. Cambiare l'orientamento ha invertito la freccia iniziale. Cambiare la modalità delle unità ha controllato se il puntatore cresceva con la linea. Queste osservazioni riguardano questo esempio; esamina il file esportato effettivo nell'applicazione che lo riceverà.

Una punta ancorata esattamente al punto finale lascia anche il contorno esteso fino a quel punto. Su una linea spessa, parte del contorno può restare visibile accanto a una punta stretta, come mostra il confronto. Se quella giunzione conta, regola insieme motivo, ancoraggio o punto finale del tracciato ed esamina la giunzione. Il posizionamento del marcatore non accorcia il contorno sottostante.

Lascia che la curva controlli la direzione

Per una punta di freccia alla fine di un tracciato, orient="auto" segue la direzione del tracciato in quel punto. La direzione finale di una curva deriva dalla sua tangente locale, quindi la freccia non deve necessariamente puntare lungo la linea retta tra i due estremi del tracciato.

Per frecce a entrambe le estremità, usa orient="auto-start-reverse". Si comporta come auto alla fine, ma ruota il marcatore iniziale di ulteriori 180 gradi. La documentazione MDN di orient lo descrive come il modo per riutilizzare una sola punta di freccia rivolta verso l'esterno a entrambe le estremità.

Il confronto in alto a destra rende visibile la differenza: con auto, il puntatore iniziale guarda lungo la curva. Con auto-start-reverse, guarda dalla parte opposta all'inizio. Non serve una seconda copia della forma invertita manualmente.

Controlla la direzione del tracciato quando il risultato sorprende. Invertire un tracciato cambia quale estremità è il suo inizio. Una freccia che indica un flusso deve essere collegata secondo quella direzione, anche se le due estremità occupano per caso le stesse posizioni sullo schermo di prima.

Decidi se lo spessore della linea deve cambiare le dimensioni

markerUnits imposta il sistema di coordinate usato per dimensioni e contenuti del marcatore. Il valore predefinito è strokeWidth; l'alternativa è userSpaceOnUse. Consulta la documentazione MDN di markerUnits per la distinzione.

Il puntatore occupa 10 delle 12 unità orizzontali del suo viewBox. Con markerWidth="6" e markerUnits="strokeWidth", la larghezza non ruotata è 10 / 12 × 6 × stroke-width: 20 unità utente sul contorno di 4 unità e 40 su quello di 8. Il confronto in basso a sinistra usa quelle impostazioni.

Per mantenere quel puntatore largo 20 unità con entrambi gli spessori, cambia la definizione in:

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

Il confronto in basso a destra usa quei valori. Mantenere markerWidth="6" cambiando soltanto la modalità delle unità produrrebbe un puntatore molto più piccolo, perché sei unità non sarebbero più moltiplicate per lo spessore del tratto.

userSpaceOnUse non significa un numero fisso di pixel sullo schermo. Scalare l'SVG circostante o il suo sistema di coordinate può comunque cambiare le dimensioni visualizzate. Esamina il marcatore alle dimensioni finali del layout, soprattutto quando un motivo grande viene ridotto a una piccola annotazione di diagramma.

Prepara un motivo personalizzato prima di farne un marcatore

Per un triangolo o un puntatore semplice, disegna direttamente il tracciato. Per grafica vettoriale esistente, conserva i tracciati originali e decidi quale coordinata deve collegarsi alla linea. Conserva i fori voluti, semplifica i dettagli che scompaiono alle dimensioni previste e dai alla grafica spazio sufficiente nel viewport del marcatore.

Se una punta di freccia personalizzata o un motivo decorativo esiste soltanto come PNG o JPG, il procedimento da immagine a vettore di PerfectVector può aiutare a recuperare un candidato SVG prima di questo passaggio di confezionamento. Confronta sagoma e piccole aperture con la sorgente, elimina le eventuali forme di sfondo indesiderate, poi scegli limiti e punto di ancoraggio della grafica approvata. La conversione non crea definizioni di marcatori, non assegna la direzione dei tracciati e non aggiunge il comportamento dei connettori dei diagrammi.

Mantieni espliciti i colori durante i test. Questo esempio usa un marcatore verde petrolio e una linea blu scuro così il loro limite resta visibile. Se la tua freccia deve avere un solo colore ovunque, imposta deliberatamente entrambi i colori ed esamina il risultato consegnato. La guida alla modifica dei colori SVG descrive riempimenti fissi e stili che possono interferire con la ricolorazione.

Controlla il file dove verrà usato

Conserva un originale modificabile, poi testa una copia di consegna attraverso il sito web, editor o procedimento di esportazione effettivo. Un'anteprima corretta nel browser dimostra l'aspetto di quel file nel browser; non dimostra il comportamento di importazione di ogni applicazione.

• Conferma che ogni url(#...) punti all'ID del marcatore previsto dopo il confezionamento o l'ottimizzazione.
• Controlla tracciati dritti e curvi, incluso un marcatore iniziale se lo usi.
• Confronta gli spessori di linea più sottili e più pesanti del disegno.
• Esamina punta, giunzione ed eventuali parti tagliate alle dimensioni finali di visualizzazione.
• Riapri indipendentemente l'SVG consegnato e confrontalo con l'anteprima sorgente.

I marcatori sono decorazioni visibili collegate a posizioni del tracciato. Non creano connessioni semantiche tra oggetti di diagramma. Per punti di connessione e comportamento degli stencil propri di un editor di diagrammi, usa il suo sistema di forme native; la guida alle forme personalizzate draw.io descrive quel compito separato.

Un marcatore non è neppure automaticamente un contorno di taglio fisicamente unito. Se la destinazione richiede geometria di taglio chiusa, prepara ed esamina una copia di consegna separata basata su tracciati in un editor vettoriale. Una linea e una punta di freccia che si sovrappongono sullo schermo non dimostrano un contorno unito. Altre guide di preparazione SVG descrivono pulizia della grafica e controlli successivi.

FAQ

Perché la mia punta di freccia SVG è spostata rispetto alla linea? Controlla refX e refY rispetto alle coordinate della grafica del marcatore. Identificano il punto posizionato sull'estremità del tracciato. In questo esempio la punta è a 11,6; usare 0,0 posiziona lì invece l'origine.

Come riutilizzo una punta di freccia a entrambe le estremità? Fai riferimento allo stesso marcatore con marker-start e marker-end e usa orient="auto-start-reverse". L'istanza iniziale si inverte mentre quella finale segue la direzione del tracciato.

Perché la punta di freccia cresce quando ispessisco la linea? Il valore predefinito di markerUnits è strokeWidth. Usa userSpaceOnUse quando il marcatore deve mantenere le dimensioni nelle coordinate utente dell'elemento, poi regola markerWidth e markerHeight per quel sistema di unità.

Un marcatore trasforma la freccia in un unico tracciato chiuso? No. La definizione del marcatore resta separata dal tracciato che la referenzia. Prepara ed esamina geometria realmente unita se un successivo procedimento di taglio o modifica la richiede.

Fonti

1. MDN — marker — Definizioni dei marcatori, forme supportate e proprietà di collegamento.
2. MDN — refX — Posizionamento orizzontale del punto di riferimento nel sistema di coordinate del marcatore.
3. MDN — refY — Posizionamento verticale del punto di riferimento nel sistema di coordinate del marcatore.
4. MDN — orient — Rotazione automatica e inversione dell'istanza iniziale.
5. MDN — markerUnits — Dimensioni relative al contorno e nelle coordinate utente.

Parti da un motivo e controlla ancoraggio, direzione e dimensioni sia su una linea sia su una curva. Se il tuo motivo esiste soltanto come immagine raster, prepara un candidato SVG, esamina sagoma e aperture, poi confeziona i tracciati accettati come marcatore.