Bagaimanakah anda menggunakan kecerunan linear pada segi empat tepat SVG menggunakan CSS?

Cara Memohon Kecerunan Linear pada Segiempat SVG Menggunakan CSS

Memohon kecerunan pada elemen SVG ialah tugas biasa dalam pembangunan web. Dalam artikel ini, kami akan meneroka cara menggunakan CSS untuk menggunakan kecerunan linear pada segi empat tepat SVG.

Memahami Sintaks Kecerunan

Dalam CSS, kecerunan linear ditakrifkan menggunakan imej latar belakang harta benda. Sintaksnya adalah seperti berikut:

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• arah: Menentukan arah kecerunan akan mengalir. Nilai biasa termasuk ke atas, ke bawah, ke kiri dan ke kanan.
• warna-henti: Mewakili titik pada garisan kecerunan di mana warna tertentu ditentukan. Ia dinyatakan sebagai nilai peratusan antara 0% dan 100%. Berbilang hentian warna boleh ditakrifkan, setiap satu dengan warna dan kedudukan yang berbeza.

Menggunakan Kecerunan

Untuk menggunakan kecerunan pada segi empat tepat SVG, anda boleh menggunakan sifat isian. Hanya sediakan nilai linear-gradient() sebagai nilai untuk isian. Contohnya:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

Mentakrifkan Kecerunan dalam SVG

Dalam dokumen SVG itu sendiri, anda boleh mentakrifkan kecerunan menggunakan unsur. Elemen ini biasanya diletakkan dalam bahagian. Contohnya:

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

Dalam contoh di atas, kecerunan ditakrifkan dengan dua hentian warna: satu pada 5% dengan warna #F60 dan satu lagi pada 95% dengan warna #FF6. Atribut id menyediakan pengecam unik untuk kecerunan, yang membolehkan anda merujuknya dalam CSS.

Merujuk Kecerunan dalam CSS

Dalam CSS, anda boleh merujuk kecerunan yang ditentukan menggunakan url() function:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

Ini akan menggunakan kecerunan yang ditakrifkan dalam elemen pada segi empat tepat SVG.

Contoh Lengkap

Berikut ialah contoh lengkap cara menggunakan kecerunan linear pada segi empat tepat SVG:

<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%" stop-color="#F60" />
            <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
    </defs>

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

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>

Memohon kecerunan linear kepada segi empat tepat SVG menggunakan CSS ialah teknik berkuasa yang boleh meningkatkan daya tarikan visual reka bentuk anda. Dengan menggunakan sifat isian dan nilai linear-gradient(), anda boleh mencipta kecerunan dengan pelbagai warna, arah dan kelegapan.

Atas ialah kandungan terperinci Bagaimanakah anda menggunakan kecerunan linear pada segi empat tepat SVG menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!