W3docs
it
Accedi

SVG Line

Scopri l'elemento SVG <line>: disegna una linea retta con x1/y1/x2/y2, stilizzala con stroke, aggiungi tratteggi e frecce, e confrontala con <path>.

Descrizione dell'elemento <line>

L'elemento SVG <line> disegna una singola linea retta tra due punti: un punto di partenza (x1, y1) e un punto di arrivo (x2, y2). Usalo ogni volta che hai bisogno di una riga di base, un asse, un connettore o un divisore all'interno di un <svg> — è il modo più semplice e leggibile per esprimere "una linea da A a B".

Tutti e quattro gli attributi di coordinata hanno valore predefinito 0 e accettano lunghezze (unità utente, come 30 o 30px) o percentuali relative al viewport (come 50%). Quindi un <line> senza attributi è una linea di lunghezza zero nell'origine, che non visualizza nulla.

Poiché un <line> è geometricamente unidimensionale, non ha un'area interna. SVG riempie l'interno di una forma con il colore fill e dipinge il suo contorno con il colore stroke — e una linea non ha interno. Per questo motivo l'attributo fill viene ignorato, e una linea è invisibile finché non le si assegna uno stroke.

Esempio dell'elemento SVG <line>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
    </svg>
  </body>
</html>
Provalo tu stesso »

Spieghiamo il codice qui sopra:

  • L'attributo x1 specifica la coordinata x di partenza.
  • L'attributo y1 specifica la coordinata y di partenza.
  • L'attributo x2 specifica la coordinata x di arrivo.
  • L'attributo y2 specifica la coordinata y di arrivo.

Per impostazione predefinita, le linee vengono disegnate con uno stroke nero e una larghezza di stroke di 1 pixel. È possibile personalizzarli usando gli attributi stroke e stroke-width, come mostrato nell'esempio.

Stilizzare le linee: tratteggi, terminazioni e frecce

L'aspetto di una linea è controllato interamente dalle proprietà relative allo stroke. L'esempio qui sotto disegna tre linee con trattamenti diversi:

  • stroke-dasharray trasforma una linea continua in una tratteggiata o punteggiata. Il valore è un elenco di lunghezze di tratti e spazi (8 4 significa un tratto di 8 unità seguito da uno spazio di 4 unità, ripetuto).
  • stroke-linecap modella le estremità della linea — butt (il valore predefinito, piatto), round, o square.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Altre due proprietà sono utili con le linee:

  • marker-end collega un <marker> riutilizzabile (definito in <defs>) alla fine della linea — il modo standard per aggiungere una freccia.
  • vector-effect="non-scaling-stroke" mantiene costante la larghezza dello stroke anche quando l'SVG viene ridimensionato, in modo che una linea sottile rimanga tale indipendentemente dallo zoom.

SVG <line> vs SVG <path>

Gli elementi SVG <line> e <path> disegnano entrambi linee, ma servono a scopi diversi. L'elemento <line> è specificamente progettato per linee semplici e rette ed è più semantico ed efficiente per questo compito. L'elemento <path> viene utilizzato per definire forme complesse o più linee e curve collegate. Sebbene <path> possa disegnare linee rette, è generalmente preferibile usare <line> per segmenti retti di base e riservare <path> per disegni più complessi.

La stessa linea retta può essere espressa in entrambi i modi. Il <line> del primo esempio è equivalente a un <path> che si sposta al punto di partenza (M50,30) e disegna una linea fino al punto di arrivo (L300,300):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

La versione con <path> è più prolissa per un singolo segmento, ed è esattamente per questo che esiste <line>. Se hai bisogno di più segmenti retti uniti uno dopo l'altro, usa <polyline> invece di accatastare molti elementi <line>.

L'elemento SVG <line> supporta anche gli Attributi Globali e gli Attributi di Evento.

Esercitazione

Pratica
Quale insieme di attributi definisce i due punti finali di una linea SVG?
Quale insieme di attributi definisce i due punti finali di una linea SVG?
Was this page helpful?