<Defs> dan <filter>
Semua filter SVG internet didefinisikan dalam <defs> elemen. The <defs> elemen singkat untuk definisi dan mengandung definisi elemen khusus (such as filters) .
The <filter> elemen digunakan untuk mendefinisikan filter SVG. The <filter> elemen memiliki atribut id yang diperlukan yang mengidentifikasi filter. grafis kemudian menunjuk ke filter untuk digunakan.
SVG <feGaussianBlur>
contoh 1
The <feGaussianBlur> elemen 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>
Cobalah sendiri " Code explanation:
- The id atribut dari <filter> elemen mendefinisikan nama yang unik untuk filter
- Efek blur didefinisikan dengan <feGaussianBlur> elemen
- The in="SourceGraphic" bagian mendefinisikan bahwa efek dibuat untuk seluruh elemen
- The stdDeviation atribut mendefinisikan jumlah blur
- The filter atribut dari <rect> elemen link elemen ke "f1" Filter