SVG Gradien - Linear

SVG Gradien

Sebuah gradien adalah 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 Linear Gradient - <linearGradient>

The <linearGradient> elemen digunakan untuk menentukan gradien linier.

The <linearGradient> elemen harus bersarang dalam <defs> tag. The <defs> tag adalah singkatan definisi dan mengandung definisi elemen khusus (such as gradients) .

gradien linier dapat didefinisikan sebagai gradien horisontal, vertikal atau sudut:

• gradien horisontal 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 dibuat ketika x1 dan x2 berbeda dan y1 dan y2 berbeda

contoh 1

Mendefinisikan sebuah elips dengan gradien linier horisontal dari kuning ke merah:

Berikut adalah kode SVG:

Code explanation:

• The id atribut dari <linearGradient> tag mendefinisikan nama yang unik untuk gradien
• X1 itu, x2, y1, atribut y2 dari <linearGradient> tag menentukan awal dan akhir posisi gradien
• Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan <stop> tag. The offset atribut digunakan untuk mendefinisikan mana warna gradient mulai dan berakhir
• The fill atribut sponsor elemen elips untuk gradien

contoh 2

Mendefinisikan sebuah elips dengan gradien linier vertikal dari kuning ke merah:

Berikut adalah kode SVG:

contoh 3

Mendefinisikan sebuah elips dengan gradien linier horisontal dari kuning ke merah, dan menambahkan teks di dalam elips:

Berikut adalah kode SVG:

Code explanation:

• The <text> elemen digunakan untuk menambah teks