SVG Gradient - Linear

SVG Gradient

gradien adalah transisi yang mulus dari satu ke warna lain warna. Selain itu, transisi dapat diterapkan untuk sejumlah warna pada elemen yang sama.

Ada dua jenis utama dari SVG Gradient:

• linear
• radial

SVG linear gradien - <linearGradient>

<LinearGradient> elemen digunakan untuk menentukan gradien linier.

<LinearGradient> tag harus bersarang di dalam <defs> interior. <Defs> tag adalah definisi akronim, seperti elemen khusus yang dapat didefinisikan seperti gradien.

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

• Ketika y1 dan y2 adalah sama, tetapi tidak keduanya x1 dan x2, membuat gradien horisontal
• Ketika x1 dan x2 sama, y1 dan y2 tidak sama, Anda dapat membuat gradien vertikal
• Ketika x1 dan x2 yang berbeda dan y1 dan y2 tidak sama, Anda dapat membuat sudut gradien

contoh 1

Ini mendefinisikan linear gradien horisontal dari kuning ke oval merah:

Berikut adalah Kode SVG:

Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).

analisis kode:

• atribut id <linearGradient> tag bisa menjadi nama yang unik untuk definisi gradien
• <LinearGradient> tag X1, X2, Y1, Y2 atribut mendefinisikan awal dan akhir gradien
• Gradient warna kisaran oleh dua atau lebih warna. Setiap warna dengan tag <berhenti> untuk menentukan. offset digunakan untuk menentukan awal dan akhir posisi gradien.
• Isi elemen properti untuk link ke gradien elips

contoh 2

Tentukan linear gradien vertikal dari kuning ke oval merah:

Berikut adalah Kode SVG:

Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).

contoh 3

Definisi elips, yang linear gradien horisontal dari kuning ke merah dalam teks dan menambahkan elips:

Berikut adalah Kode SVG:

Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).

analisis kode:

• <Teks> elemen digunakan untuk menambah teks