Gradasi Linear SVG
- Halaman Sebelumnya Penapis Gauss SVG
- Halaman Berikutnya Gradasi Radiasi SVG
Penampang SVG mesti ditakrifkan di dalam tag <defs>.
Penampang SVG
Penampang adalah peralihan yang lancar daripada satu warna kepada warna lain. Selain itu, boleh digunakan pelbagai peralihan warna untuk satu elemen yang sama.
Dalam SVG, terdapat dua jenis utama penampang:
- Penampang linear
- Penampang radiasi
Penampang linear
Tag <linearGradient> digunakan untuk menakrifkan penampang linear SVG.
Tag <linearGradient> mesti dimasukkan di dalam tag <defs>. Tag <defs> adalah singkatan daripada definitions, ia boleh ditakrifkan elemen khas seperti penampang.
Penampang linear boleh ditakrifkan sebagai penampang horizontal, menegak atau segi:
- Apabila y1 dan y2 serupa, dan x1 dan x2 berbeza, boleh diciptakan penampang horizontal
- Apabila x1 dan x2 serupa, dan y1 dan y2 berbeza, boleh diciptakan penampang menegak
- Apabila x1 dan x2 berbeza, dan y1 dan y2 berbeza, boleh diciptakan penampang segi
Salin kod di bawah ini ke Notepad dan simpan fail sebagai "linear1.svg". Letakkan fail 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>
Pengelakuan kod:
- Properti id tag <linearGradient> boleh menakrifkan nama unik bagi penampang
- Properti fill:url(#orange_red) menghubungkan elemen ellips kepada penampang ini
- Properti x1, x2, y1, y2 tag <linearGradient> boleh ditakrifkan tempat permulaan dan pengakhiran penampang
- Gambaran warna penampang boleh disusun daripada dua atau lebih warna. Setiap warna diatur oleh tag <stop>. Properti offset digunakan untuk menentukan tempat permulaan dan pengakhiran penampang.
Lihat contoh (penampang pelataran)
Satu contoh lain:
<?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>
- Halaman Sebelumnya Penapis Gauss SVG
- Halaman Berikutnya Gradasi Radiasi SVG