Ultimele tutoriale de dezvoltare web
 

SVG <polygon>


SVG Polygon - <polygon>

<polygon> Elementul este folosit pentru a crea un grafic care conține cel puțin trei laturi.

Poligoanele sunt realizate din linii drepte, iar forma este "closed" (toate liniile de a conecta în sus).

Poligon provine din limba greacă. "Poly" înseamnă "many" și "gon" înseamnă "angle" .


Exemplul 1

Exemplul următor creează un poligon cu trei laturi:

Ne pare rău, browser-ul dvs. nu acceptă SVG inline.

Aici este codul SVG:

Exemplu

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

Code explanation:

  • points atribut definește coordonatele x și y pentru fiecare colț al poligonului

Exemplul 2

Exemplul următor creează un poligon cu patru laturi:

Ne pare rău, browser-ul dvs. nu acceptă SVG inline.

Aici este codul SVG:

Exemplu

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

Exemplul 3

Utilizați <polygon> elementul pentru a crea o stea:

Ne pare rău, browser-ul dvs. nu acceptă SVG inline.

Aici este codul SVG:

Exemplu

<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>
Încearcă - l singur »

Exemplul 4

Schimbarea proprietății de umplere-regulă "evenodd" :

Ne pare rău, browser-ul dvs. nu acceptă SVG inline.

Aici este codul SVG:

Exemplu

<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>
Încearcă - l singur »