Latest web development tutorials

SVG poligono

SVG poligono - <poligonale>

esempio 1

<Poligono> tag viene utilizzato per creare grafica contenenti almeno tre lati.

I poligoni sono linee rette, la forma è "chiuso" (tutte le linee collegate).

osservazione poligono dalla Grecia. "Poli" a "molti", "gon" significa "angolo".

Ecco il codice SVG:

Esempi

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Sottolinea Poligono = "200,10 250.190 160.210"
style = "riempire: calce; corsa: purple; stroke-width: 1" />
</ Svg>

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).

analisi del codice:

  • X e Y coordinate dei punti attributo definizioni per ogni angolo del poligono

esempio 2

L'esempio seguente crea un poligono a quattro lati:

Ecco il codice SVG:

Esempi

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Sottolinea Poligono = "220,10 300.210 170.250 123.234"
style = "riempire: calce; corsa: purple; stroke-width: 1" />
</ Svg>

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).


esempio 3

Utilizzare <poligonale> elemento per creare una stella:

Ecco il codice SVG:

Esempi

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Sottolinea Poligono = "100,10 40.180 190,60 10,60 160.180"
style = "riempire: calce; corsa: purple; stroke-width: 5; fill-regola: diverso da zero;" />
</ Svg>

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).


esempio 4

Modificare il riempimento-regola attributo "evenOdd":

Ecco il codice SVG:

Esempi

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Sottolinea Poligono = "100,10 40.180 190,60 10,60 160.180"
style = "riempire: calce; corsa: purple; stroke-width: 5; fill-regola: evenOdd;" />
</ Svg>

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).