Bagaimanakah saya boleh Menggunakan Kecerunan Linear pada Segi Empat SVG?

Menggunakan Kecerunan Linear pada Elemen SVG

Dalam bidang reka bentuk SVG, anda mungkin menghadapi keperluan untuk meningkatkan grafik anda dengan kecerunan yang menarik secara visual . Artikel ini akan membimbing anda melalui proses menggunakan kecerunan linear pada elemen SVG, khususnya memfokuskan pada segi empat tepat.

Dalam CSS, atribut "isi" membolehkan anda memberikan warna pepejal kepada elemen SVG seperti segi empat tepat. Walau bagaimanapun, untuk mencapai kesan kecerunan, anda boleh memanfaatkan kuasa kecerunan linear.

Untuk menentukan kecerunan linear dalam SVG anda, gunakan "" unsur. Tentukan ID kecerunan dan orientasinya. Dalam elemen ini, cipta berbilang elemen "berhenti" untuk menentukan warna dan kedudukan setiap titik di sepanjang kecerunan.

Seterusnya, rujuk ID kecerunan yang ditentukan dalam atribut "isi" CSS bagi elemen segi empat tepat. Daripada menggunakan warna pepejal, nyatakan "url(#GradientID)", gantikan "GradientID" dengan ID sebenar yang ditakrifkan dalam SVG anda.

Contohnya:

<code class="css">rect {
    ...
    fill: url(#MyGradient);
}</code>

Dalam HTML bahagian SVG anda, pastikan bahawa kecerunan "MyGradient" diisytiharkan dengan betul dalam "" bahagian, seperti yang ditunjukkan di bawah:

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

Melaksanakan langkah-langkah ini akan menggunakan kecerunan linear yang boleh disesuaikan secara berkesan pada elemen segi empat tepat SVG anda, meningkatkan daya tarikan visualnya dan menambah kedalaman pada reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Menggunakan Kecerunan Linear pada Segi Empat SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!