Applying an SVG Filter to a Background Image

I am trying to apply an SVG filter (Gaussian blur) only to a part of the image (i.e. to the background). I achieved this effect by adding a cropped SVG image with Gaussian blur applied in the same position (so that it looks like the Gaussian decomposition is applied to the original image).

This is clearly inefficient, and I'm looking for a better method. After reading some SVG documents and examples, this looks like an enable-background attribute, but I would really appreciate help in implementing it!

Edit:

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

+6
svg svg-filters
source share
1 answer

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 background filter effects using the in = "BackgroundImage" and enable-background attributes are not supported by any common browser.

+5
source share

All Articles