SVG Lingkaran - <circle>
The <lingkaran> elemen yang digunakan untuk membuat lingkaran:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="14" fill="yellow"/>
</svg>
Kode penjelasan:
- Atribut cx dan cy menentukan koordinat x dan y dari pusat lingkaran. Jika cx dan cy dihilangkan, pusat lingkaran diatur ke (0,0)
- R atribut mendefinisikan jari-jari lingkaran
SVG Ellipse - <elips>
<ellipse> elemen digunakan untuk membuat sebuah elips.
Elips berkaitan erat dengan lingkaran. Perbedaannya adalah bahwa elips memiliki x dan ay radius yang berbeda satu sama lain, sedangkan lingkaran memiliki x dan y sama radius:
Contoh 1
Contoh berikut membuat ellipse:
<svg width="500" height="140">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2;"/>
</svg>
Kode penjelasan:
- cx atribut mendefinisikan koordinat x dari pusat ellipse
- cy atribut mendefinisikan y koordinat pusat ellipse
- Rx atribut mendefinisikan radius horisontal
- ry atribut mendefinisikan radius vertikal
Contoh 2
Contoh berikut membuat tiga ellipse:
<svg width="500" height="140">
<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>
Contoh 3
Contoh berikut menggabungkan dua ellipse (kuning dan satu putih):
<svg width="500" height="140">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple;"/>
<ellipse cx="220" cy="100" rx="210" ry="20" style="fill:white;"/>
</svg>
0 komentar:
Posting Komentar