Efek Kabur SVG
<defs> dan <filter>
Semua filter SVG internet didefinisikan dalam elemen <defs>. Elemen <defs> adalah kependekan dari definisi dan berisi definisi elemen khusus (seperti filter).
Elemen <filter> digunakan untuk mendefinisikan filter SVG. Elemen <filter> memiliki atribut id yang diperlukan yang mengidentifikasi filter. Grafik kemudian menunjuk ke filter yang akan digunakan.
SVG <feGaussianBlur>
Contoh 1
Elemen <feGaussianBlur> digunakan untuk membuat efek blur:
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Atribut id dari elemen <filter> mendefinisikan nama unik untuk filter
- Efek blur didefinisikan dengan elemen <feGaussianBlur>
- Bagian in="SourceGraphic" mendefinisikan bahwa efek dibuat untuk seluruh elemen
- Atribut stdDeviation mendefinisikan jumlah blur
- Atribut filter dari elemen <rect> menautkan elemen ke filter "f1"