SVG <polygon>

SVG Çokgen - <polygon>

<polygon> En az üç kenarı olan grafikleri oluşturmak için kullanılır.

Çokgenler, birbirine bağlanmış doğalardan oluşur ve "kapalı" bir şekildedir (tüm çizgiler birbirine bağlanır).

Polygon kelimesi Yunanca'dan gelir. "Poly" kelimesi "birçok" anlamına gelir, "gon" kelimesi ise " açı" anlamına gelir.

Örnek 1

Üç kenarlı bir çokgen oluşturmak için aşağıdaki örnek kullanılır:

Bu SVG kodu:

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

Kendi Kendine Deney

Kod açıklaması:

  • points özelliği, çokgenin her köşesinin x ve y koordinatlarını tanımlar

Örnek 2

Aşağıdaki örnek, dört kenarlı bir çokgen oluşturur:

Bu SVG kodu:

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

Kendi Kendine Deney

Örnek 3

Kullanarak <polygon> Bir yıldız oluşturmak için element kullanılır:

Bu SVG kodu:

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

Kendi Kendine Deney

Örnek 4

fill-rule özelliğini şu şekilde değiştirin: "evenodd":

Bu SVG kodu:

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

Kendi Kendine Deney