Disegnare una curva con SVG <polyline>

L'elemento polyline è una forma di base di SVG, utilizzato per creare una serie di linee rette che connettono più punti. Un polyline tipico viene utilizzato per creare una forma aperta, dove l'ultimo punto non è connesso al primo punto

Esempio di linea ondulata

Esempio di codice per la linea ondulata:

<svg width="120" height="120"　
　　　　　viewPort="0 0 120 120" version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"
　　　　<polyline fill="none" stroke="black"　
　　　　　　　　　　　　　　points="20,100 40,60 70,80 100,20"
</svg>

L'effetto dopo l'esecuzione è il seguente:

Disegna un triangolo

Esempio di codice:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="0,0 30,0 15,30"
　　　　　　　　style="stroke:#006600;"
</svg>

Anteprima dell'effetto dopo l'esecuzione:

Le linee multiple sono identificate da punti. Ogni punto è elencato in points attributo con x, y. Questo esempio ha 3 punti, che definiscono un triangolo.
Connetti i 3 punti con una linea e riempi. Il colore di riempimento predefinito è nero.

Disegna un triangolo riempito di verde

Esempio di codice:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2 60,2 35,52"
　　　　　　　　style="stroke:#006600; stroke-width: 2;
　　　　　　　　　　　　　　　fill: #33cc33;
</svg>

Anteprima dell'effetto dopo l'esecuzione:

Potresti aver notato che solo due linee del triangolo sono disegnate con il colore di traccia (verde scuro). Il motivo è che sono state disegnate solo le linee tra i punti elencati. Non è stata disegnata la linea che torna al primo punto. Per questo, l'attributo points aggiunge di nuovo il primo punto, come mostrato di seguito:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2 60,2 35,52 10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

L'attributo style imposta il colore e lo spessore della linea di traccia e il colore di riempimento.