HTML5 Svg Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Svg Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3258)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/8jhj8fgf21d5.png
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol