SVG blur - blur Gaussian
Catatan: Internet Explorer dan Safari tidak mendukung filter SVG!
<Defs> dan <filter>
SVG filter semua Internet yang didefinisikan dalam <defs> elemen. <Defs> mendefinisikan pendek dan mengandung unsur khusus (seperti filter) definisi.
<Filter> tag digunakan untuk mendefinisikan penyaring SVG. <Filter> tag dengan atribut id yang diperlukan untuk menentukan aplikasi grafis yang menyaring?
SVG <feGaussianBlur>
contoh 1
<FeGaussianBlur> elemen digunakan untuk menciptakan efek blur:
Berikut adalah Kode SVG:
contoh
<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>
<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 »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- -Satunya nama <filter> atribut id elemen mendefinisikan filter
- <FeGaussianBlur> mendefinisikan blur
- di = "SourceGraphic" Bagian ini mendefinisikan efek yang diciptakan oleh seluruh gambar
- atribut stdDeviation mendefinisikan jumlah blur
- Filter Properti <rect> elemen digunakan untuk menghubungkan elemen untuk "f1" filter