Kesan kabur SVG
Nota: Internet Explorer dan Safari tidak menyokong penapis SVG!
<defs> dan <filter>
Semua penapis SVG Internet ditakrifkan dalam elemen <defs> Takrifan elemen <defs> pendek dan mengandungi takrifan untuk elemen khas (seperti penapis).
<penapis> teg digunakan untuk mentakrifkan penapis SVG. Teg <penapis> menggunakan atribut id yang diperlukan untuk menentukan penapis yang hendak digunakan pada graf?
SVG <feGaussianBlur>
Contoh 1 Unsur
<feGaussianBlur> digunakan untuk mencipta kesan kabur:
di bawah Adakah kod SVG:
Instance
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk lihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<penapis>Atribut id elemen mentakrifkan nama unik penapis
-
<feGaussianBlur> Elemen mentakrifkan kesan kabur
in="SourceGraphic" Bahagian ini mentakrifkan kesan yang dicipta daripada keseluruhan imej
stdDeviation Attribute mentakrifkan jumlah kabur
<rect> Atribut penapis elemen digunakan untuk memautkan elemen ke penapis "f1"
