Bagaimana untuk Memohon Kecerunan Linear pada Elemen Rect SVG Menggunakan CSS?

Menggunakan Kecerunan Linear pada Elemen Rect SVG Menggunakan CSS

Dalam usaha untuk meningkatkan visual, pembangun sering berusaha untuk menggunakan kecerunan linear pada SVG rect elemen. Soalan ini mendalami teknik menggunakan CSS untuk mencapai kecerunan tersebut.

Pendekatan CSS

Untuk menggunakan kecerunan linear pada elemen tegak SVG melalui CSS, manfaatkan pengisian atribut seperti yang anda lakukan dalam atribut isian mana-mana elemen lain. Adalah penting untuk mentakrifkan kecerunan linear dalam SVG itu sendiri.

Pertimbangkan contoh ini:

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

<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

Kod ini mentakrifkan kecerunan linear dalam elemen dan menetapkannya sebagai nilai isian bagi unsur. Hasilnya, segi empat tepat akan memaparkan warna kecerunan berjalan dari #F60 hingga #FF6.

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