SVG <polygon>

SVG Poligono - <polygon>

<polygon> L'elemento viene utilizzato per creare grafici che contengono almeno tre lati.

Il poligono è formato da linee e ha una forma "chiusa" (tutte le linee si connettono).

La parola Polygon deriva dal greco. "Poly" significa "molto", "gon" significa "angolo".

Esempio 1

Esempio che crea un poligono con tre lati:

Questo è il codice SVG:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Prova personalmente

Spiegazione del codice:

• L'attributo points definisce le coordinate x e y di ogni angolo del poligono

Esempio 2

Esempio che crea un poligono con quattro lati:

Questo è il codice SVG:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Prova personalmente

Esempio 3

Usa <polygon> Elemento per creare una stella:

Questo è il codice SVG:

<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>

Prova personalmente

Esempio 4

Cambia l'attributo fill-rule in "evenodd":

Questo è il codice SVG:

<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>

Prova personalmente