Efek Blur SVG

<defs> dan <filter>

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

<filter> Elemen untuk mendefinisikan filter SVG.<filter> Elemen memiliki atribut id yang wajib, untuk mengidentifikasi filter. kemudian grafik akan menunjuk filter yang akan digunakan.

SVG <feGaussianBlur>

Contoh 1

<feGaussianBlur> Elemen untuk membuat efek blurring:

Ini adalah kode SVG:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Coba sendiri

Pengertian kode:

• Atribut id elemen <filter> menentukan nama unik filter
• <feGaussianBlur> elemen menentukan efek blurring
• in="SourceGraphic" ditentukan efek keseluruhan elemen yang dibuat
• Properti stdDeviation menentukan jumlah blur
• Properti filter elemen <rect> menghubungkan elemen ini ke "f1" filter