SVG Poligono - <polygon>
Il <polygon> elemento viene utilizzato per creare un grafico che contiene almeno tre lati.
I poligoni sono fatte di linee rette, e la forma è "closed" (tutte le linee collegano l'alto).
Poligono viene dal greco. "Poly" significa "many" e "gon" significa "angle" .
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>
Prova tu stesso " Code explanation:
- Il points attributo definisce le coordinate x y 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>
Prova tu stesso " esempio 3
Utilizzare il <polygon> elemento 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>
Prova tu stesso " esempio 4
Modificare la proprietà di riempimento-regola per "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>
Prova tu stesso "