Bagaimana untuk Memohon Kecerunan pada Elemen SVG Menggunakan CSS?

Menggunakan Kecerunan pada Elemen SVG Menggunakan CSS

Melaksanakan kecerunan pada elemen tegak SVG memerlukan penggunaan CSS bersama-sama dengan keupayaan kecerunan berkuasa SVG. Atribut isian bagi elemen rect membenarkan aplikasi kecerunan.

Untuk mencipta kecerunan linear, tambah peraturan CSS berikut pada helaian gaya anda:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

Sekarang, dalam fail SVG, tentukan kecerunan linear menggunakan dan elemen:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

Di sini, kecerunan menjangkau dari #F60 pada 5% hingga #FF6 pada 95% sepanjang elemen. Anda boleh melaraskan warna dan peratusan mengimbangi untuk menyesuaikan kecerunan.

Akhir sekali, rujuk kecerunan menggunakan atribut isian dalam elemen rect:

<rect width="100" height="50" fill="url(#MyGradient)"/>

Pendekatan ini membolehkan anda menggunakan cantik dan kecerunan dinamik kepada elemen SVG anda menggunakan CSS, meningkatkan daya tarikan visual dan pengalaman pengguna aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Kecerunan pada Elemen SVG Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!