SVG Ellipse
Contoh 1
elemen lt;elips> digunakan untuk mencipta elips:
Elips sangat serupa dengan bulatan . Perbezaannya ialah elips mempunyai jejari x dan y yang berbeza, manakala bulatan mempunyai jejari x dan y yang sama:
Berikut ialah kod SVG:
Contoh
<!DOCTYPE html> <html> <body> <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> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton Grafik SVG).
Analisis kod:
Koordinat x pusat elips yang ditakrifkan oleh atribut CX
Atribut CY Koordinat y bagi pusat elips yang ditentukan
Jejari mendatar yang ditakrifkan oleh atribut RX
Jejari menegak yang ditakrifkan oleh RY atribut
Contoh 2
Contoh berikut mencipta tiga elips bertindan:
Berikut ialah kod SVG:
Contoh
<!DOCTYPE html> <html> <body> <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> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat Fail SVG (klik kanan pada sumber pratonton grafik SVG).
Contoh 3
Contoh berikut menggabungkan dua bujur (satu kuning dan satu putih):
Berikut ialah kod SVG:
Instance
<!DOCTYPE html> <html> <body> <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> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk Pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
