HTML SVG Ders_8 Kırık Doğrular (Polyline)

HTML5 SVG ile Kırık Doğru (Polyline) Çizimi

<polyline> elemanı, kırık bir doğru çizmemizi sağlar.

Bu elemanın içine atadığımız points özelliğine, doğrumuzun kırılma noktalarının koordinatlarını yazmamız gerekiyor. Örneklere dikkat edelim...

Örnek 1

Bu kırık doğrunun kodu şöyledir:

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

Yukarıdaki kodlarda gördüğünüz sayı çiftleri, (20,20 gibi), çizeceğimiz çizginin, başlangıç noktasından başlayarak, her kırılma noktasının koordinatlarıdır.

Örnek 2

Bu kırık doğrunun kodu da şöyledir:

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>

sonraki ders için tıklayınız

HTML SVG Ders_7 Çokgen (Polygon)

HTML5 SVG ile Çokgen (Polygon) Çizimi

<polygon> elemanı, en az üç köşesi olan bir çokgen oluşturmak için kullanılır.

<polygon> elamınında tanımlanan points özelliği, çokgenin köşe noktalarının koordinatlarını içerir.

Örnek 1



Bu üçgenin kodu şöyledir:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Örnek 2


Bu dörtgenin kodları şöyledir:

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Örnek 3




Bu dörtgenin kodları şöyledir:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Örnek 4





Bu dörtgenin kodları şöyledir:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

sonraki ders için tıklayınız