SVG elips
SVG elips - <elips>
contoh 1
lt; elips> elemen digunakan untuk membuat sebuah elips:
Oval dan bulat sangat mirip. Kecuali bahwa elips memiliki radius yang berbeda dari x dan y, dan jari-jari x dan y dari lingkaran adalah sama:
Berikut adalah Kode SVG:
contoh
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- koordinat x CX atribut pusat didefinisikan elips
- y koordinat atribut CY mendefinisikan pusat elips
- Horisontal radius definisi atribut RX
- radius vertikal definisi atribut RY
contoh 2
Contoh berikut membuat tiga dan menumpuk pada oval:
Berikut adalah Kode SVG:
contoh
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
contoh 3
Contoh berikut menggabungkan dua elips (kuning dan putih):
Berikut adalah Kode SVG:
contoh
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
