Bagaimana untuk Memohon Kecerunan pada SVG Rectangles dalam CSS?

Kecerunan SVG dalam CSS

Soalan ini melibatkan penggunaan kecerunan pada elemen SVG. Bahagian berikut menerangkan cara melaksanakan fungsi ini dalam CSS.

Menggunakan atribut isian

Pada masa ini, anda menggunakan atribut isian untuk menetapkan warna pepejal untuk elemen Walaupun ini berfungsi dengan baik untuk menetapkan satu isian warna, ia tidak berfungsi dengan baik dengan kecerunan.

Menggunakan kecerunan

Untuk menggunakan kecerunan linear, anda perlu merujuk takrifan kecerunan yang ditakrifkan dalam SVG menggunakan fungsi url(). Dalam CSS, sintaksnya ialah:

fill: url(#gradient-id);

di mana #gradient-id ialah ID yang anda takrifkan untuk kecerunan dalam SVG.

Contoh

Kod berikut menunjukkan cara menggunakan kecerunan linear pada elemen :

CSS

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

SVG

<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>

Ini akan mencipta kecerunan mendatar daripada merah (#F60) kepada oren (#FF6), digunakan pada

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