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ü :
Bir birini takip eden çizgiler yaparken line yerine polyline nı kullanabiliriz.Örneğin istatisliki grafiklerde bu özellik kullanılabilir.
UstaDerslik
