HTML5 Svg Ders-5 çizgi - Line
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-5 çizgi - Line

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1634)
RAPOR ET
Html5 svg derslerimize deavm ediyoruz.Bu derste svg de çizgi çizderme komutu olan lineyi işleyeceğiz.İlk derste gördüğümüz polygona biraz benziyor line.Ama polygondaki çizgiler kesişince bir polygon oluşuyordu.Ama linede bir koordinattan diğer koordinata kadar çizgi çizdiriyoruz.Kesişen yerlerde de bir etkileşim olmuyor.

<line x1="50" y1="75" x2="450" y2="75" stroke="#15d4f5" stroke-width="10" />

Parametreleri inceleyelim.

x1 : 1. x koordinatı
y1 : 1. y koordinatı
x2 : 2. x koordinatı
y2 : 2. y koordinatı
stroke : Çizgi rengi
stroke-width : Çizgi kalınlığı

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

<svg width="500" height="300">
<line x1="50" y1="75" x2="450" y2="75" stroke="#15d4f5" stroke-width="10" />
<line x1="100" y1="125" x2="400" y2="125" stroke="#15d4f5" stroke-width="10" />
<line x1="150" y1="175" x2="350" y2="175" stroke="#15d4f5" stroke-width="10" />
<line x1="200" y1="225" x2="300" y2="225" stroke="#15d4f5" stroke-width="10" />
</svg>

</body>
</html>

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

Html5 svg de çizgi çizmekde bu kadar.



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