Blur Gauss SVG

Filter SVG harus didefinisikan di dalam tag <defs>.

Blur Gauss

Tag <filter> digunakan untuk mendefinisikan filter SVG. Bagaimana tag <filter> menggunakan properti id wajib untuk menentukan filter mana yang akan diterapkan ke grafik?

Tag <filter> harus disisihkan di dalam tag <defs>. Tag <defs> adalah singkatan dari definitions, yang memungkinkan untuk mendefinisikan elemen khusus seperti filter

Silakan salin kode di bawah ini ke notepad, lalu simpan berkas sebagai "filter1.svg". Masukkan berkas 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 kode:

  • Properti id tag <filter> dapat menentukan nama unik untuk filter (filter yang sama dapat digunakan oleh banyak elemen dalam dokumen)
  • Properti filter:url digunakan untuk menghubungkan elemen ke filter. Saat menghubungkan id filter, harus digunakan karakter #
  • Efek filter ditentukan melalui tag <feGaussianBlur>. Akhiran fe dapat digunakan untuk semua filter
  • Properti stdDeviation dari tag <feGaussianBlur> dapat menentukan tingkat blur
  • Bagian in="SourceGraphic" ini menentukan efek yang dibuat oleh keseluruhan gambar

Lihat Contoh

Contoh lainnya dengan nilai stdDeviation yang berbeda

<?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