Bu dersimizde html5 in
svg özelliğini anlatacağım.Svg canvas gibi bize bir çizim alanı sunuyor.Bu çizim alanında polygonlarla çizim yapabiliyoruz.Basit bir örnekle başlayalım.
<svg width="200" height="200">
<polygon points="0,0 200,0 200,200 0,200 " style="fill:#f1f1f1;stroke:#000;stroke-width:3;" />
</svg>
Yukarıda ilk önce svg ile bir çizim alanı ekledik ve boyut atadık.İçine polygon tagı ile bir polygon koyduk.İçine istediğimiz kadar polygon koyabiliriz.Yukarıda polygonumuz 200x200 boyutlarında bir kutu.Parametrelere bakalım.
1-Points
Points içine koordinatları yazıyoruz.
points="x,y x,y x,y ..." şeklinde ekliyoruz.İşleyişi şu şekilde ilk koordinat olarak 0,0 yadık ikinci için 0,200 yazarsak 0,0 dan 0,200 çizgi çizecektir.3 kooridanat olarak 0,300 yazarsak 0,200 den 0,300 çizgi çekecektir.
3 koordinat girdikten sonra bitişten başlangıça kendi otomatik çizgi çizer ve kapalı bir polygon olur.İçini istediğimiz renge boyatabiliriz.
2-Style
Bir kaç tane özelliği var.
fill : 3 koordinat girdikten sonra içi siyah renge boyanır.Rengi değiştirmek için kullanırız.
stroke : Çizgi rengini değiştirmek için.
stroke-width : Çizgi kalınlığı.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
</head>
<body>
<svg width="500" height="600">
<polygon points="0,0 500,600" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="500,0 0,600" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="250,0 250,600" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="0,300 500,300" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="250,50 485,300 250,550 15 300" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="250,150 385,300 250,450 115 300" style="fill:transparent;stroke:#ddd;stroke-width:3;" />
<polygon points="250,250 285,300 250,350 215,300" style="fill:#ddd;stroke:#ddd;stroke-width:3;" />
Tarayıcınız svg yi desteklemiyor.
</svg>
</body>
</html>
Görüntüsü :
Yukarıda bir çok polygon kullanarak bu çizimi yaptım.Sizde bu şekilde çizimler yapabilirizsiniz.Polygonlarda ilk eklenen en alta kalır.En son eklenen ise en üste kalır.
UstaDerslik
