HTML SVG Ders_7 Çokgen (Polygon)

HTML5 SVG ile Çokgen (Polygon) Çizimi

<polygon> elemanı, en az üç köşesi olan bir çokgen oluşturmak için kullanılır.

<polygon> elamınında tanımlanan points özelliği, çokgenin köşe noktalarının koordinatlarını içerir.

Örnek 1



Bu üçgenin kodu şöyledir:

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

Örnek 2


Bu dörtgenin kodları şöyledir:

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

Örnek 3




Bu dörtgenin kodları şöyledir:

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

Örnek 4





Bu dörtgenin kodları şöyledir:

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

sonraki ders için tıklayınız