SVG Gaussian Blur

Dapat itatalaga ang SVG filter sa loob ng <defs> na tag.

Gaussian Blur

Ang <filter> na tag ay ginagamit upang itakda ang filter na gagamitin sa grafiko. Ano ang dapat gamitin na id sa <filter> na tag para itakda kung aling filter ang gagamitin sa mga grafiko?

Ang <filter> na tag ay dapat nakalagay sa loob ng <defs> na tag. Ang <defs> na tag ay isang pangalang maikling uri ng definitions, na nagbibigay ng kapahalan na magtalaga ng mga espesyal na elemento tulad ng filter

Isalang ang sumusunod na kode sa notepad, at i-save ang file bilang "filter1.svg". Ilagay ang file sa iyong web directory:

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

Paliwanag ng Kode:

  • Ang attribute na id ng <filter> na tag ay nagbibigay ng isang nag-iisang pangalan sa filter (ang parehong filter ay maaaring gamitin ng maraming elemento sa dokumento)
  • Ang attribute na filter:url ay ginagamit upang kumonekta ang elemento sa filter. Kapag pinagsasama ang id ng filter, dapat gamitin ang character na #
  • Ang epekto ng filter ay tinatawag sa pamamagitan ng <feGaussianBlur> na tag. Ang sufikso na fe ay maaaring gamitin sa lahat ng filter
  • Ang attribute na stdDeviation ng <feGaussianBlur> na tag ay maaaring itakda ang antas ng pagblura
  • Ang bahaging "in="SourceGraphic"" ay nagtataglay ng epekto na ginawa ng buong imaheng ginawa

View Example

Isang halimbawa ng iba't ibang stdDeviation na may magkakaibang halaga

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

View Example