Gaussian Blur SVG

Filter SVG mesti disifatkan didalam tanda <defs>.

Gaussian Blur

Tanda <filter> digunakan untuk menyifatkan filter SVG. Bagaimana tanda <filter> menggunakan properti id yang wajib untuk mensifatkan filter yang akan diterapkan kepada grafik?

Tanda <filter> mesti disatukan dalam tanda <defs>. Tanda <defs> adalah singkatan daripada definitions, ia membenarkan untuk menyifatkan elemen khas seperti filter

Sila salin kod di bawah ini ke Notepad dan simpan fail sebagai "filter1.svg". Letakkan fail ini ke direktori web anda:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Pengertian kod:

  • Properti id tanda <filter> boleh mensifatkan nama unik kepada filter (filter yang sama boleh digunakan oleh beberapa elemen didalam dokumen)
  • Properti filter:url digunakan untuk menghubungkan elemen kepada filter. Apabila menghubungkan id filter, perlu menggunakan aksara #
  • Efect filter disifatkan melalui tanda <feGaussianBlur>. Prefik fe boleh digunakan untuk semua filter
  • Properti stdDeviation tanda <feGaussianBlur> boleh mensifatkan tingkat blur
  • Bagian in="SourceGraphic" ini mensifatkan efek yang dibuat oleh keseluruhan imej

Lihat Contoh

Sebuah contoh lain daripada nilai stdDeviation yang berbeza

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Lihat Contoh