HTML5 Svg Ders-6 Devam Eden çizgi - polyline
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-6 Devam Eden çizgi - polyline

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1736)
RAPOR ET
Html5 svg derslerimize devam ediyoruz.Bu derste polyline tagını işleyeceğiz.Polyline,polygon tagından çok farklı değildir.İşleyişi aynı ama polyline tek farkı sadece kesişen yerlerin içini değil istediğimiz zaman içini boyaya bilmemiz.Parametrelerine göz atalım.

<polyline points="x1,y1 x2,y2 x3,y3 ..."  />

Bu şekilde istediğimiz kadar koordinat girebiliriz.İşleyişi şu şekilde : 1. x ve y den 2. x ve y ye çizgi çizer.Daha sonra 2. x ve y den 3. x ve y ye çizgi çizer bu şekilde devam ediyor.fill parametresi ile de istediğimiz zaman içini boyayabiliriz.

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">
<polyline points="125,100 375,100 375,200 125,200 125,100" style="fill:#f5f5f5;stroke:#ddd;stroke-width:1" />
<polyline points="50,100 100,150 50,200" style="fill:none;stroke:#ddd;stroke-width:2" />
<polyline points="450,100 400,150 450,200" style="fill:none;stroke:#ddd;stroke-width:2" />
</svg>

</body>
</html>

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

Bir birini takip eden çizgiler yaparken line yerine polyline nı kullanabiliriz.Örneğin istatisliki grafiklerde bu özellik kullanılabilir.



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