HTML5 Svg Ders-2 Dikdörtgen - rect
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 Ders-2 Dikdörtgen - rect

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2781)
RAPOR ET
Daha önceden html5 in svg özelliğini anlatmıştım.Ama diğer kalan etiketleride anlatmak istedim.Şunu http://ustaderslik.com/konu/HTML5_Svg_Kullanımı ilk ders kabul edip devam edeceğim.

Öncelikle svg den az bahsedeyim.Svg açılımı " Scalable Vector Graphics " Türkçesi ölçeklenebilir vektör grafikleri.Svg canvas gibi bir tuval sunar bize ama canvastan farklı olarak taglar ile çizim yapabiliriz.Yukarıdaki derste polygon tagını anlatmıştım.Bu derste ise rect tagını anlatacağım.Rect tuvale dikdörtgen çizmemizi sağlıyor.Şimdi parametrelerimizi inceleyelim.

x : x koordinatı
y : y koordinatı
width : genişlik
height : yükseklik
rx : x ovallik miktarı
ry : y ovallik miktarı
style : Stilini değiştirmek için.Kullandığımız stil komutları ise şunlar :
fill : Objenin rengini değiştirir
stroke : Çerçeve rengini değiştirir
stroke-width : Çerçeve kalınlığı

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
</head>
<style type="text/css">
svg{border:1px solid #ddd;}
</style>
<body>

<svg width="500" height="300">
<rect x="50" y="40" width="400" height="100" rx="50" ry="50" style="fill:#15d4f5;" />
<rect x="100" y="150" width="290" height="100" style="fill:#15d4f5;stroke:#14b7d3;stroke-width:5;" />
</svg>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/g2h9fgh2.png

Svg de dikdörtgen çizimi bu şekilde.



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