HTML5 Svg Ders-3 Daire - circle
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-3 Daire - circle

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



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