Html5 svg derslerimize devam ediyoruz.Bu derste daire çizdirmeyi göreceğiz.Bunun için kullancağımız tag
circle .Daireyi çizerken belirttiğim konum dairenin tam ortasıdır.Verdiğimiz yarı çap ile daire hem sağdan hem solda büyür.
<svg width="500" height="300">
<circle cx="150" cy="150" r="80" />
</svg>
Circle'nin parametrelerini inceleyerek başlayalım.
cx : x konumu
cy : y konumu
r : yarı çap
fiil : arkaplan rengi
stroke : çerçeve rengi
stroke-width : çerçeve kalınlığı
Son 3 parametreyi diğer derslerde de anlatmıştım ama burada da yazdım.Gördüğünüz gibi svg nin yapısı çok basit.
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">
<circle cx="150" cy="150" r="80" fill="#15d4f5" />
<circle cx="350" cy="150" r="80" stroke="#14b7d3" stroke-width="3" fill="#15d4f5" />
</svg>
</body>
</html>
Görüntüsü :
UstaDerslik
