Garis Lurus Gradient SVG

<defs> dan <filter>

Semua filter SVG berada di <defs> didefinisikan di dalam elemen.<defs> elemen adalah singkatan dari definitions, yang mengandung definisi elemen khusus (seperti filter).

<filter> elemen digunakan untuk mendefinisikan filter SVG.<filter> elemen memiliki properti id yang wajib, untuk mengidentifikasi filter. kemudian grafik akan menunjuk ke filter yang akan digunakan.

SVG <feOffset>

Contoh 1

<feOffset> Elemen digunakan untuk menciptakan efek bayangan. Pemikiran adalah: pertama-tama mengambil sebuah SVG grafik (gambar atau elemen), kemudian gerakkannya sedikit di xy.

Contoh pertama memindai sebuah segi empat (dengan menggunakan <feOffset>），kemudian gabungkan gambar asli ke atas pindai gambar (dengan menggunakan <feBlend>）：

Ini adalah kode SVG:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Coba Sendiri

Pengertian Kode:

• properti id elemen <filter> menentukan nama unik filter
• <rect> properti filter menghubungkan elemen ke filter "f1"

Contoh 2

Sekarang, anda dapat mengblur pindai gambar (dengan menggunakan <feGaussianBlur>）：

Ini adalah kode SVG:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

Coba Sendiri

Pengertian Kode:

• <feGaussianBlur> elemen stdDeviation properti menentukan tingkat blur

Contoh 3

Sekarang, atur bayangan menjadi hitam:

Ini adalah kode SVG:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Coba Sendiri

Pengertian Kode:

• <feOffset> atribut in diubah menjadi "SourceAlpha", yang menggunakan jalur Alpha daripada seluruh piksel RGBA untuk blurring

Contoh 4

Sekarang, lakukan pengolahan bayangan dengan warna:

Ini adalah kode SVG:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

Coba Sendiri

Pengertian Kode:

• <feColorMatrix> Filtre digunakan untuk mengubah warna gambar yang dialirkan menjadi lebih dekat hitam. Semua nilai '0.2' dalam matriks di kalikan dengan jalur merah, hijau, dan biru. Menurunkan nilai mereka akan membuat warna mendekati hitam (hitam adalah 0)