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>
<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.
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>
<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>
Hiç yorum yok:
Yorum Gönder