Disegnare una linea retta con SVG <line>

L'elemento <line> di SVG è una forma di base di SVG utilizzata per creare una linea che connette due punti. L'elemento <line> viene utilizzato per disegnare linee all'interno di un'immagine SVG. Può disegnare linee orizzontali, linee verticali, linee oblique, ecc.

Esempio SVG line online

Di seguito sono riportati alcuni esempi di uso comune di SVG <line> per tracciare linee:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"></line>
　　　　　　　　<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>
　　　　　　　　<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line>
　　　　　　　　<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
</svg>

L'effetto della linea dopo l'esecuzione del codice è il seguente:

Il punto di partenza della linea è determinato dal punto specificato dagli attributi x1 e y1.
Il punto finale della linea è determinato dal punto specificato dagli attributi x2 e y2.
L'attributo style di questo style imposta il colore e la spessore della traccia (linea).