SVG Gradien
Gradien adalah sebuah transisi yang mulus dari satu warna ke warna lain. Selain itu, beberapa transisi warna dapat diterapkan untuk unsur yang sama.
Ada dua jenis utama dari gradien di SVG:
- Linear
- Radial
SVG Gradient Linear - <LinearGradient>
<LinearGradient> elemen digunakan untuk menentukan gradien linier.
<LinearGradient> elemen harus bersarang dalam <defs> tag. <defs> tag adalah singkatan definisi dan mengandung definisi elemen khusus (seperti gradien).
Gradien linear dapat didefinisikan sebagai horisontal, vertikal atau sudut gradien:
- Gradien horizontal dibuat ketika y1 dan y2 adalah sama dan x1 dan x2 berbeda
- Gradien vertikal dibuat ketika x1 dan x2 adalah sama dan y1 dan y2 berbeda
- Gradien sudut yang dibuat ketika x1 dan x2 berbeda dan y1 dan y2 berbeda
Contoh 1
<svg width="400" height="150">
<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>
Kode penjelasan:
- Id atribut <LinearGradient> mendefinisikan sebuah nama untuk gradien
- X1 The, x2, y1, y2 atribut dari <LinearGradient> tag menentukan posisi awal dan akhir gradien
- Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan <stop> tag. Atribut offset digunakan untuk menentukan di mana gradien warna mulai dan akhir
- Mengisi atribut menghubungkan elemen elips untuk gradien
Contoh 2
<svg width="400" height="150">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<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>
Contoh 3
<svg width="400" height="150">
<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)"/>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
Kode penjelasan:
- The <text> elemen digunakan untuk menambahkan teks
0 komentar:
Posting Komentar