Gradien Linear SVG

Peningkatan SVG harus didefinisikan di dalam tag <defs>.

Peningkatan SVG

Peningkatan adalah transisi yang lancar dari satu warna ke warna lain. Selain itu, dapat diterapkan transisi warna berbagai warna ke elemen yang sama.

Dalam SVG, ada dua jenis utama peningkatan:

  • Peningkatan linear
  • Peningkatan radiasi

Peningkatan linear

Tag <linearGradient> digunakan untuk menentukan peningkatan linear SVG.

Tag <linearGradient> harus disisipkan di dalam tag <defs>. Tag <defs> adalah singkatan dari definitions, yang dapat menentukan elemen khusus seperti peningkatan.

Peningkatan linear dapat ditentukan sebagai peningkatan horizontal, vertikal, atau segitiga:

  • Ketika y1 dan y2 sama, dan x1 dan x2 berbeda, dapat dibuat peningkatan horizontal
  • Ketika x1 dan x2 sama, dan y1 dan y2 berbeda, dapat dibuat peningkatan vertikal
  • Ketika x1 dan x2 berbeda, dan y1 dan y2 berbeda, dapat dibuat peningkatan segitiga

Salin kode di bawah ini ke notepad, lalu simpan berkas sebagai "linear1.svg". Masukkan berkas ini ke direktori web Anda:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Pengertian kode:

  • Properti id tag <linearGradient> dapat menentukan nama unik untuk peningkatan
  • Properti fill:url(#orange_red) menghubungkan elemen ellips ke peningkatan ini
  • Properti x1, x2, y1, y2 tag <linearGradient> dapat menentukan posisi awal dan akhir peningkatan
  • Range warna peningkatan dapat diatur oleh dua atau lebih warna. Setiap warna diatur melalui tag <stop>. Properti offset digunakan untuk menentukan posisi awal dan akhir peningkatan.

Lihat contoh (peningkatan horizontal)

Contoh lainnya:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Lihat Contoh (Gradien Vertikal)