HTML SVG Ders_5 Elips (Ellipse)

HTML5 SVG ile Elips (Ellipse) Çizimi

<ellipse> elemanı bir elips çizmek için kullanılır.

Bir elips; üstten ve alttan basık çizilen bir daire gibidir.

Aşağıda farklı şekillerde elips örnekleri ve kodları verilmiştir:

Örnek 1

Bu elipsin kodları şöyledir:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

Bu kodların anlamı şudur:

cx="200" cy="80" kodları elipsin merkezinin svg elemanı içindeki koordinatlarıdır.

rx="100" özelliği elipsin yatay yarıçapını, 

ry="50" özelliği de elipsin dikey yarıçapını belirtir.

Örnek 2

Bu elipslerin kodu şöyledir:

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

Örnek 3

Bu elipslerin kodu şöyledir:

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

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

HTML SVG Ders_4 Daire (Circle )

HTML5 SVG Elemanı ile Daire (Circle) Çizimi

<circle> elemanı, svg ile bir daire çizmek için kullanılır. Aşağıda bir daire ve bu dairenin kodları verilmiştir:



Bu dairenin kodları şöyledir:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Bu kodlarda:

cx="50" cy="50" özellikleri, dairenin merkez noktasının, svg elemanına göre koordinatlarıdır. Eğer svg elemanına göre dairemizin merkezi (0,0) noktası olacaksa, bu iki özellik belirtilmeyebilir.

r="40" özelliği, dairenin yarıçapının kaç pixel olacağını ilan eder.

stroke="black" özelliği, dairenin dış çizgisinin rengidir.

stroke-width="3" özelliği, dış çizginin kalınlığıdır. (pixel olarak)

fill="red" özelliği ise dairenin iç dolgusunun rengini belirler.

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