SVG <polygon>

SVG Polygon - <polygon>

<polygon> Elementet används för att skapa图形 som innehåller minst tre kanter.

En polygon är sammansatt av raka linjer och är i formen "sluten" (alla linjer är anslutna).

Ordet "Polygon" kommer från grekiskan. "Poly" betyder "många", "gon" betyder "vinkel".

Exempel 1

Nedan skapar detta en trekantig polygon:

Detta är SVG-koden:

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

Prova själv

Kodförklaring:

• points-attributet definierar x- och y-koordinaterna för varje hörn av en polygon

Exempel 2

Nedan skapar detta en fyrkantig polygon:

Detta är 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>

Prova själv

Exempel 3

Använd <polygon> Elementet skapar en stjärna:

Detta är 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>

Prova själv

Exempel 4

Ändra fill-rule-attributet till "evenodd":

Detta är 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>

Prova själv