SVG <polygon>

SVG-multipolygoni - <polygon>

<polygon> Elementti käytetään vähintään kolmikulmion sisältävien kuvien luomiseen.

Polygoni koostuu suorista viivoista ja on muodoltaan "suljettu" (kaikki viivat yhdistyvät).

Polygon-sanan juuret ovat kreikkalaisessa kielessä. "Poly" tarkoittaa "monia", "gon" tarkoittaa "kulmaa".

Esimerkki 1

Tässä esimerkissä luodaan kolmiokulmio:

Tämä on SVG-koodi:

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

Kokeile itse

Koodin selitys:

• points-ominaisuus määrittää polygonin jokaisen kulman x- ja y-koordinaatit

Esimerkki 2

Tässä esimerkissä luodaan neljäkulmion:

Tämä on SVG-koodi:

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

Kokeile itse

Esimerkki 3

Käytä <polygon> Elementti luo tähten:

Tämä on SVG-koodi:

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

Kokeile itse

Esimerkki 4

Muuta fill-rule-ominaisuus "evenodd":

Tämä on SVG-koodi:

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

Kokeile itse