W3docs
it
Accedi

SVG Path

Scopri l'elemento SVG <path> e i comandi dell'attributo d: moveto, lineto, curve di Bézier, archi ed closepath, con esempi pratici.

L'elemento SVG <path> è la forma più potente e flessibile in SVG. Quasi ogni altra forma SVG — linee, poligoni e curve — può essere riprodotta con un <path>. Questa pagina spiega l'unico attributo che svolge tutto il lavoro, l'attributo d, e illustra ogni comando di disegno che supporta con i relativi parametri ed esempi eseguibili.

Descrizione dell'elemento <path>

L'elemento SVG <path> specifica un percorso: una serie di comandi di disegno che spostano una "penna" immaginaria sul canvas per tracciare linee, curve e archi.

I percorsi vengono utilizzati per creare forme complesse combinando più segmenti rettilinei o curvilinei. Forme complesse composte solo da linee rette possono essere create anche come polyline, ma a differenza di una polyline, un path può disegnare vere curve, quindi non ha bisogno di molti piccoli segmenti di linea per simulare una curva.

In SVG il sistema di coordinate inizia dall'angolo in alto a sinistra: x cresce verso destra e y cresce verso il basso. Tieni presente questo — un valore y più grande è più in basso sullo schermo, non più in alto.

La forma di un percorso è definita interamente dall'attributo d ("data"). Il valore di d è una stringa composta da comandi a lettera singola, ciascuno seguito dai numeri (parametri) che il comando richiede.

Comandi dell'attributo d

Ogni comando è una singola lettera seguita dai suoi parametri. I comandi disponibili sono:

ComandoNomeParametri
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(nessuno)

Comandi assoluti e relativi

Ogni comando esiste in due forme. Le lettere maiuscole usano coordinate assolute — ogni x y viene misurato dall'origine in alto a sinistra dell'SVG (0, 0). Le lettere minuscole usano coordinate relative — ogni valore è uno scostamento dalla posizione corrente della penna (dove il comando precedente si è concluso).

I due percorsi seguenti disegnano lo stesso triangolo. Il primo usa comandi assoluti, il secondo usa comandi relativi:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Leggendo la versione relativa: inizia da (100, 50), poi sposta +100, 0 (verso 200, 50), poi sposta -50, +100 (verso 150, 150), quindi z chiude il percorso tornando all'inizio. I comandi relativi sono utili quando vuoi traslare un'intera forma — modifica solo il primo M e il resto lo segue.

MoveTo, linee e chiusura (M, L, H, V, Z)

  • M x y solleva la penna e la sposta in (x, y) senza disegnare. Ogni percorso deve iniziare con un moveto.
  • L x y disegna una linea retta dal punto corrente a (x, y).
  • H x disegna una linea orizzontale fino alla coordinata x x (y rimane invariata). È una scorciatoia per un L orizzontale.
  • V y disegna una linea verticale fino alla coordinata y y (x rimane invariata).
  • Z chiude il percorso disegnando una linea retta fino al punto M più recente.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Provalo tu stesso »

L'attributo fill colora l'interno della forma, mentre stroke colora il contorno. Per ulteriori opzioni sul contorno (larghezza, trattini, terminazioni delle linee) vedi SVG Stroking.

Curve di Bézier cubiche (C e S)

Una curva di Bézier cubica piega un segmento usando due punti di controllo. C x1 y1 x2 y2 x y disegna una curva dal punto corrente a (x, y); (x1, y1) è il punto di controllo per l'inizio e (x2, y2) è il punto di controllo per la fine. La curva viene "attratta" verso ciascun punto di controllo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Qui la penna inizia da (20, 150), e i due punti di controllo (20, 20) e (280, 20) attraggono la curva verso l'alto formando un arco morbido che termina in (280, 150). Usando fill="none" la curva rimane aperta anziché riempire l'area sottostante.

La variante smooth S x2 y2 x y continua una curva C (o S) precedente in modo fluido: ha un solo punto di controllo perché il primo viene automaticamente rispecchiato dal punto di controllo finale del comando precedente. Questo rende facile concatenare curve in un'onda continua.

Curve di Bézier quadratiche (Q e T)

Una curva di Bézier quadratica è più semplice — utilizza un solo punto di controllo. Q x1 y1 x y disegna una curva dal punto corrente a (x, y), piegata verso il singolo punto di controllo (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Il singolo punto di controllo (150, 20) si trova sopra il punto centrale e attira la linea formando una gobba simmetrica. La variante smooth T x y continua una curva Q/T precedente riflettendo automaticamente il suo punto di controllo, quindi si fornisce solo il nuovo punto finale.

Archi ellittici (A)

Il comando arc disegna una sezione di un'ellisse. Accetta sette parametri:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — i raggi orizzontale e verticale dell'ellisse.
  • x-axis-rotation — rotazione dell'ellisse, in gradi.
  • large-arc-flag — 0 per l'arco più piccolo, 1 per l'arco più grande tra i due punti.
  • sweep-flag — 0 per tracciare in senso antiorario (angolo negativo), 1 per tracciare in senso orario (angolo positivo).
  • x, y — il punto finale dell'arco.

Poiché due punti su un'ellisse possono essere collegati da quattro possibili archi, i due flag scelgono quale viene disegnato.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Entrambi gli archi condividono gli stessi raggi (60 60) e lo stesso punto di inizio (60, 150) e fine (180, 150). Il percorso cremisi usa large-arc-flag 0, sweep-flag 1 per disegnare l'arco corto sopra la linea; il percorso teal usa large-arc-flag 1, sweep-flag 0 per disegnare l'arco grande nell'altro verso. Cambiare i flag è il modo più semplice per capire come si comporta A.

Suggerimenti

  • Un percorso inizia sempre con un moveto. Senza un M/m iniziale, il percorso non viene visualizzato.
  • I numeri possono essere separati da spazi o virgole — L 100 50 e L100,50 sono equivalenti.
  • I comandi identici ripetuti possono essere impliciti: M10 10 L20 20 L30 30 può essere scritto M10 10 L20 20 30 30.
  • Scrivere manualmente percorsi complessi è soggetto a errori; un editor vettoriale che esporta SVG è di solito il flusso di lavoro migliore, ma capire i comandi ti permette di leggere e correggere l'output.

Pagine correlate

  • SVG Reference — un elenco rapido di tutti gli elementi e attributi SVG.
  • SVG Stroking — controlla larghezza, colore e tratteggio dei contorni.
  • SVG Line — disegna un singolo elemento di linea retta.
  • SVG Polygon — disegna forme chiuse da un elenco di punti.

Esercizio

Pratica
Quali dei seguenti sono comandi validi dell'attributo 'd' di un SVG path?
Quali dei seguenti sono comandi validi dell'attributo 'd' di un SVG path?
Was this page helpful?