SVG <çokgen>
SVG Çokgeni - <çokgen>
<polygon> öğesi, en az üç kenar içeren bir grafik oluşturmak için kullanılır.
Çokgenler düz çizgilerden oluşur ve şekil "kapalı"dır (tüm çizgiler birbirine bağlanır).
Çokgen Yunancadan gelir. "Poli", "çok" ve "gon", "açı" anlamına gelir.
örnek 1
Aşağıdaki örnek, üç kenarı olan bir çokgen oluşturur:
İşte SVG kodu:
Örnek
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Kod açıklaması:
- Points özelliği, çokgenin her köşesi için x ve y koordinatlarını tanımlar.
Örnek 2
Aşağıdaki örnek, dört kenarı olan bir çokgen oluşturur:
İşte SVG kodu:
Örnek
<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
Bir yıldız oluşturmak için <poligon> öğesini kullanın:
İşte SVG kodu:
Örnek
<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
Doldurma kuralı özelliğini "evenodd" olarak değiştirin:
İşte SVG kodu:
Örnek
<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>