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ü :
Svg de dikdörtgen çizimi bu şekilde.
UstaDerslik
