Kecerunan SVG - Linear
Kecerunan SVG
Kecerunan ialah peralihan lancar daripada satu warna ke warna lain. Di samping itu, pelbagai peralihan warna boleh digunakan pada elemen yang sama.
Terdapat dua jenis utama kecerunan SVG:
Linear
Jejari
Kecerunan Linear SVG - Unsur <Kecerunan linear>
<Kecerunan linear> digunakan untuk mentakrifkan kecerunan linear.
teg<linearGradient> mesti bersarang di dalam <defs>. Teg <defs> ialah singkatan definisi, yang boleh mentakrifkan elemen khas seperti kecerunan.
Kecerunan linear boleh ditakrifkan sebagai kecerunan mendatar, menegak atau sudut:
Kecerunan mendatar boleh dicipta apabila y1 dan y2 adalah sama, tetapi x1 dan x2 adalah berbeza
Apabila x1 dan x2 adalah sama, tetapi y1 dan y2 berbeza, anda boleh mencipta kecerunan menegak
Apabila x1 dan x2 berbeza, dan y1 dan y2 adalah berbeza , anda boleh mencipta kecerunan sudut
Contoh 1
Tentukan kecerunan linear mendatar elips daripada kuning kepada merah:
Berikut ialah kod SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
Run Instance»
Klik "Run Instance butang " untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<linearGradient>Atribut id teg boleh mentakrifkan nama unik untuk kecerunan
<linearGradient>X1, Setiap warna ditentukan oleh teg <stop> Sifat offset digunakan untuk menentukan kedudukan mula dan akhir kecerunan.
Atribut isian memautkan elemen elips ke kecerunan ini
- Contoh 2
Berikut ialah kod SVG:
Contoh<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" 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(#grad1)" /> </svg> </body> </html>
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Berikut ialah kod SVG:
Instance<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<teks> elemen digunakan untuk menambah teks
