Disegnare un poligono SVG <polygon>

L'elemento <polygon> definisce una forma di poligono chiuso costituita da una serie di segmenti di linee consecutive, con l'ultimo punto collegato al primo. L'elemento <polygon> viene generalmente utilizzato per disegnare forme con più lati (3 o più lati).

Esempio di SVG Polygon

Questo è un esempio semplice di SVG polygon:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="10,0			60,0			35,50"
　　　　　　　　　style="stroke:#660000;	fill:#cc3333;"/>
</svg>

Ecco l'effetto dopo l'esecuzione:

Potrebbe aver notato che, anche se sono stati elencati solo 3 punti, sono stati disegnati tutti e 3 i lati. Questo è perché l'elemento <polygon> disegna una linea tra tutti i punti, inclusa una linea da ultimo al primo punto. L'elemento <polyline> non disegnerà una linea da ultimo al primo punto. Questo sembra essere l'unica differenza tra gli elementi <polygon> e <polyline>.

Disegnare un esagono

Ecco il codice di esempio:

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

L'effetto di esecuzione è il seguente

Disegnare un ottagono

Questo è un esempio più grande - un ottagono a otto lati:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="50,5			100,5			125,30			125,80			100,105"
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
</svg>

Disegnare una stella a cinque punte SVG

Ecco il codice di esempio:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

Ecco l'effetto dopo l'esecuzione: