Percorso <path> SVG

L'elemento path è utilizzato per definire forme. Tutte le forme di base possono essere create utilizzando l'elemento path. L'elemento SVG <path> viene utilizzato per disegnare forme avanzate composte da linee, archi, curve ecc., con o senza riempimento. Questo <path> potrebbe essere l'elemento più avanzato e più universale tra tutti gli elementi SVG. Potrebbe anche essere l'elemento più difficile da padroneggiare.

Editor SVG online - Puoi editare SVG online, convertire il codice sorgente da SVG

Esempio di percorso

SVG <path> Esempio semplice:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50
　　　　　　　　　　　　　A30,30 0 0,1 35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="#660000; fill:none;"/>　　　　
</svg>

Il risultato dopo l'esecuzione è il seguente:

Attenersi a come l'immagine contiene un arco e due linee, e come la seconda linea non è collegata alla prima curva e alla prima linea.

Tutte le disegnatrice con l'elemento <path> sono specificate nell'attributo d. L'attributo d contiene comandi di disegno. Nei casi precedenti, M rappresenta il comando 'Move to' (muovi a), A rappresenta il comando 'Arc' (arco), L rappresenta il comando 'Line' (linea). Questi comandi vengono forniti alla penna virtuale. Questa penna può muoversi, disegnare forme, ecc.

Impostazione e spostamento della penna

Il comando d dell'attributo <path> dovrebbe sempre essere il comando move. Prima di disegnare qualcosa, dovresti spostare la penna virtuale in qualche luogo. Questo viene fatto con il comando M. Ecco un esempio semplice:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50"
　　　　　　　　　　style="#660000; fill:none;"/>
</svg>

Questo esempio sposta la penna virtuale al punto 50,50. Il prossimo comando di disegno inizierà da questo punto.

Linea

Disegnare una linea è probabilmente il comando più semplice che puoi dare all'elemento <path>. Il disegno della linea viene completato con i comandi L e l (l minuscola):

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　">
　　　　　　　　　　style="#660000; fill:none;"/>
</svg>

Questo esempio disegna una linea dal punto 50,50 (punto del comando M) al punto 100,100 (punto del comando L). L'effetto dell'immagine dopo l'esecuzione è:

La differenza tra i comandi L e l è che la versione maiuscola (L) disegna una linea fino al punto assoluto passato al comando, mentre la versione minuscola (l) disegna una linea fino al punto relativo passato al comando. Il punto relativo è il punto della penna virtuale prima dell'inizio della riga, più le coordinate fornite dal comando l.
Se la penna virtuale si trova a 50,50 e si utilizza il comando l100,100, la linea verrà disegnata come 50+100,50+100=150,150. Indipendentemente dalla posizione della penna virtuale, il comando L100,100 può disegnare la linea esattamente a 100,100.

Il movimento della penna virtuale

La forma del percorso viene sempre disegnata dal punto virtuale dell'ultimo punto di penna al nuovo punto. Ogni comando di disegno ha un punto di arrivo. Dopo l'esecuzione del comando, il punto virtuale della penna si troverà al punto di arrivo del comando di disegno. Il prossimo comando di disegno inizierà da questo punto.

Arc

Il disegno dell'arco utilizzando l'elemento <path> viene completato con i comandi A e a. Come per le linee, il comando maiuscolo (A) utilizza coordinate assolute come suo punto di arrivo, mentre il comando minuscolo (a) utilizza coordinate relative (rispetto all'origine). Ecco un esempio:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50A30,50 0 0,1 100,100"></path>
　　　　　　　　　　style="#660000; fill:none;"/>
</svg>

Il risultato dopo l'esecuzione è il seguente:

Questo esempio disegna un arco dal punto 50,50 al punto 100,100 (ultimamente specificato nel comando A).
Il raggio dell'arco è impostato dai primi due parametri del comando A. Il primo parametro è rx (il raggio in direzione x), il secondo parametro è ry (il raggio in direzione y). Impostando rx e ry allo stesso valore si ottiene un arco. Impostando rx e ry a valori diversi si ottiene un arco ellittico. Nell'esempio sopra, rx è impostato a 30 e ry a 50.
Il terzo parametro impostato nel comando A è la rotazione dell'asse x (x-axis-rotation). A differenza dell'asse x normale, questo imposta la rotazione dell'asse x dell'arco. Nell'esempio sopra, la rotazione dell'asse x è impostata a 0. Di solito, non è necessario modificare questo parametro.

I parametri quarto e quinto sono il flag dell'arco grande (large-arc-flag) e il flag di scorrimento (sweep-flag). Il flag dell'arco grande (large-arc-flag) determina se disegnare un arco più piccolo o più grande che soddisfi l'inizio, la fine e i valori di rx e ry. Ecco un esempio di disegno di 4 arcature, ognuna con diverse combinazioni di flag dell'arco grande (large-arc-flag) e flag di scorrimento (sweep-flag):

<svg width="500" height="120">
　　　　<path d="M40,20A30,30 0 0,0 60,70" style="stroke:#cccc00; stroke-width:2; fill:none;"></path>
　　　　<path d="M40,20A30,30 0 1,0 60,70" style="stroke:#ff0000; stroke-width:2; fill:none;"></path>
　　　　<path d="M40,20A30,30 0 1,1 60,70" style="stroke:#00ff00; stroke-width:2; fill:none;"></path>
　　　　<path d="M40,20A30,30 0 0,1 60,70" style="stroke:#0000ff; stroke-width:2; fill:none;"></path>
</svg>

Il risultato dopo l'esecuzione è il seguente:

È possibile disegnare quattro arcature diverse da 40,20 al punto 60,70. Un arco lungo, un arco corto e due versioni di specchia per ogni piccolo/largo arco. Il flag di grande arco determina se disegnare un arco grande o piccolo. Lo sweep-flag determina se l'arco è in specchia intorno all'asse dal punto di partenza al punto di arrivo. In realtà, lo sweep-flag controlla la direzione di disegno dell'arco (orario o antiorario), producendo così l'effetto di specchia.

L'arco disegnato per primo è l'arco giallo. Impostando il flag di grande arco a 0 significa disegnare l'arco più piccolo possibile. Lo sweep-flag è anche impostato a 0, il che significa che l'arco non sarà in specchia. Ecco l'arco giallo:

L'arco disegnato successivamente è l'arco rosso. Impostando il flag di grande arco a 1 significa disegnare la maggiore delle due arcature possibili, nell'intervallo da 40,20 a 60,70. Ecco insieme le curve arcate gialle e rosse per illustrare le differenze:

Le curve arcate verdi e blu (provenienti da tutti e quattro gli archi dell'esempio precedente) sono le stesse delle curve arcate gialle e rosse, ma vengono disegnate con lo sweep-flag impostato a 1. Questo significa che disegneranno lo stesso arco, ma in un'asse di specchia dal punto di partenza al punto di arrivo.

Curva quadric Bezier

È anche possibile disegnare una curva Bezier di secondo grado utilizzando l'elemento <path>. Il disegno di una curva Bezier di secondo grado è completato con i comandi Q e Q. Come le linee, il comando maiuscolo (Q) utilizza coordinate assolute come il suo punto di arrivo, mentre il comando minuscolo (q) utilizza coordinate relative (rispetto all'origine). Ecco un esempio semplice di curva:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="stroke: #006666; fill:none;"

Il risultato dopo l'esecuzione è il seguente:

Questo esempio disegna una curva Bezier di secondo grado, da 50,50 al punto 100,100, con il punto di controllo 50,200. Il punto di controllo è il primo dei due parametri impostati nel comando Q.

I punti di controllo attraggono la curva come un magnete. Più vicino un punto sulla curva è al punto di controllo, più il punto di controllo lo tira verso l'interno, il che significa che è più vicino al punto di controllo. Ecco alcuni esempi di punti di controllo disegnati sull'immagine:

In realtà, se si disegna una linea da un punto di partenza a un punto di controllo, e poi si disegna una linea da un punto di controllo al punto di arrivo, la linea che unisce il centro della prima linea al centro della seconda linea è la tangente della curva. Ecco un'immagine che spiega questo punto:

Curva Bezier di terzo grado

Utilizzando i comandi C e c si disegna una curva Bezier di terzo grado. La curva Bezier di terzo grado è simile alla curva Bezier di secondo grado, eccetto che hanno due punti di controllo invece di uno. Come le linee, il comando maiuscolo (C) utilizza coordinate assolute come il suo punto di arrivo, mentre il comando minuscolo (c) utilizza coordinate relative (rispetto all'origine):

<path d="M50,50 C75,80 125,20 150,50"}
　　　　　　style="stroke: #006666; fill:none;"

Ecco l'immagine del risultato con i punti di controllo, come mostrato dopo l'esecuzione:

È possibile creare curve avanzate utilizzando la curva Bezier di terzo ordine:

Chiusura del percorso

L'elemento <path> ha un comando rapido per chiudere il percorso, il che significa che la linea torna al primo punto dal punto più recente disegnato. Il comando è Z (o z - non c'è differenza tra il comando in maiuscolo e minuscolo)

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 L100,50 L100,100 Z"
　　　　style="stroke: #006666; fill:none;"

Il risultato dopo l'esecuzione è il seguente:

Comandi combinati

È possibile combinare i comandi path nello stesso elemento <path>. Ecco un esempio:

<svg width="500" height="225">
　　　　<path d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;">
</svg>

Questo esempio disegna una linea retta, un arco di cerchio, una curva Bezier di secondo ordine e chiude il percorso con una linea che torna al punto di partenza. Ecco l'immagine generata:

Riempimento del percorso

È possibile riempire il percorso utilizzando l'attributo CSS fill. Ecco un esempio:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M100,100 L150,100 L150,150 Z"
　　　　　　style="stroke: #0000cc;
　　　　　　　　　　　　　stroke-width: 2px;                                             fill: #ccccff;

Il risultato dopo l'esecuzione è il seguente:

Notare come l'interno della forma sia riempito di un blu chiaro.

Segno

È possibile utilizzare i segni di spunta sull'elemento <path>. I segni di spunta sono piccoli simboli situati all'inizio, nel mezzo e alla fine del percorso, utilizzati per indicare la direzione del percorso. Ad esempio, all'inizio del percorso c'è un cerchio o un quadrato, alla fine c'è una freccia.

Simbolo di scorciatoia

Se si deve utilizzare lo stesso comando più e più volte, è possibile omettere la lettera del comando e fornire solo un insieme di parametri aggiuntivi, come se il comando fosse lì. Ecco un esempio:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Questo esempio spiega come passare altri parametri al comando l, come se ogni parametro avesse un l davanti. Questo si applica anche agli altri comandi di percorso. Di seguito è l'immagine generata:

Completo della Comando Path

Di seguito è riportato SVG　PathElementoElenco dei comandi possibili della penna.Ogni comando è composto da una lettera e un gruppo di numeri (coordinate ecc.), che sono i parametri del comando.I comandi in maiuscolo interpretano i parametri di coordinate come coordinate assolute.I comandi in minuscolo interpretano i parametri di coordinate come relativi alla posizione corrente della penna.