SVG <poligono>
Poligono SVG - <poligono>
L'elemento <polygon> viene utilizzato per creare un grafico che contenga almeno tre lati.
I poligoni sono formati da linee rette e la forma è "chiusa" (tutte le linee si collegano).
Poligono deriva dal greco. "Poly" significa "molti" e "gon" significa "angolo".
Esempio 1
L'esempio seguente crea un poligono con tre lati:
Ecco il codice SVG:
Esempio
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Spiegazione del codice:
- L'attributo points definisce le coordinate xey per ogni angolo del poligono
Esempio 2
L'esempio seguente crea un poligono con quattro lati:
Ecco il codice SVG:
Esempio
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Esempio 3
Usa l'elemento <polygon> per creare una stella:
Ecco il codice SVG:
Esempio
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Esempio 4
Modifica la proprietà della regola di riempimento in "evenodd":
Ecco il codice SVG:
Esempio
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>