Gradien SVG - Linier
Gradien SVG
Gradien adalah transisi yang mulus dari satu warna ke warna lainnya. Selain itu, beberapa transisi warna dapat diterapkan pada elemen yang sama.
Ada dua jenis utama gradien di SVG:
- Linier
- radial
Gradien Linier SVG - <linearGradient>
Elemen <linearGradient> digunakan untuk mendefinisikan gradien linier.
Elemen <linearGradient> harus bersarang di dalam tag <defs>. Tag <defs> adalah kependekan dari definisi dan berisi definisi elemen khusus (seperti gradien).
Gradien linier dapat didefinisikan sebagai gradien horizontal, vertikal atau sudut:
- Gradien horizontal dibuat ketika y1 dan y2 sama dan x1 dan x2 berbeda
- Gradien vertikal dibuat ketika x1 dan x2 sama dan y1 dan y2 berbeda
- Gradien sudut dibuat ketika x1 dan x2 berbeda dan y1 dan y2 berbeda
Contoh 1
Tentukan elips dengan gradien linier horizontal dari kuning ke merah:
Berikut adalah kode SVG:
Contoh
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Penjelasan kode:
- Atribut id dari tag <linearGradient> mendefinisikan nama unik untuk gradien
- Atribut x1, x2, y1,y2 dari tag <linearGradient> menentukan posisi awal dan akhir gradien
- Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan tag <stop>. Atribut offset digunakan untuk menentukan di mana warna gradien dimulai dan diakhiri
- Atribut fill menautkan elemen elips ke gradien
Contoh 2
Tentukan elips dengan gradien linier vertikal dari kuning ke merah:
Berikut adalah kode SVG:
Contoh
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
Contoh 3
Tentukan elips dengan gradien linier horizontal dari kuning ke merah, dan tambahkan teks di dalam elips:
Berikut adalah kode SVG:
Contoh
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
Penjelasan kode:
- Elemen <text> digunakan untuk menambahkan teks