Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Applying SVG filter to background image

I am attempting to apply an SVG filter (Gaussian blur) to only a portion of an image (i.e. the background). I have achieved the effect by appending a clipped SVG image with Gaussian blur applied at the same position (to make it appear like the Gaussian blur is applied to the original image).

This is obviously inefficient and I'm looking for a better method. After reading some SVG docs and examples it looks like the enable-background attribute is needed but I would greatly appreciate some help on how to actually implement it!

Edit:

An example of the effect I'm looking for: http://img695.imageshack.us/img695/92/chromeblur.png

like image 783
smart alec 43 Avatar asked Nov 23 '10 10:11

smart alec 43


1 Answers

Here is a good description of how it should work in SVG

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm

But SVG support is still incomplete in all common browsers. Especially the filter effects on backgrounds using the in="BackgroundImage" and enable-background attributes are not supported by any common browser.

like image 60
Stefan Avatar answered Sep 22 '22 15:09

Stefan