SVG <polygon>

SVG polygon - <polygon>

<polygon> Elementet bruges til at oprette figurer med mindst tre kanter.

En polygon består af linjer og er formet som "lukket" (alle linjer er forbundet)

Ordet "Polygon" kommer fra det græske. "Poly" betyder "mange", og "gon" betyder "vinkel".

Eksempel 1

Følgende eksempel opretter en trekant med tre kanter:

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

  • points-attributten definerer de x- og y-coordinaterne for hver kant af polygonen

Eksempel 2

Følgende eksempel opretter en firkant med fire kanter:

Dette er SVG-koden:

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

Prøv det selv

Eksempel 3

brug <polygon> Elementet opretter en stjerne:

Dette er SVG-koden:

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

Prøv det selv

Eksempel 4

ændr fill-rule-attributet til "evenodd":

Dette er SVG-koden:

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

Prøv det selv