Effeke Blurring SVG

<defs> dan <filter>

Semua filter SVG ada di <defs> didefinisikan dalam elemen.<defs> Elemen adalah singkatan untuk definisi (definitions), yang mengandungi definisi elemen khusus (seperti filter).

<filter> Elemen untuk menentukan filter SVG.<filter> Elemen mempunyai properti id yang wajib, untuk mengenali filter. kemudian grafik akan menunjuk ke filter yang digunakan.

SVG <feGaussianBlur>

Contoh 1

<feGaussianBlur> Elemen untuk membuat kesan blurring:

Ini adalah kod 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>

Cuba Sendiri

Pengertian Kode:

• Properti id elemen <filter> menentukan nama unik filter
• <feGaussianBlur> elemen menentukan kesan blurring
• in="SourceGraphic" ialah untuk menentukan kesan keseluruhan elemen yang dibuat
• Properti stdDeviation menentukan kuantitas blur
• Properti filter elemen <rect> menghubungkan elemen ini ke "f1" filter