6

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

Improve this question
3
  • An example would be good here.
    – Erik Dahlström
    Commented Nov 23, 2010 at 11:59
  • sorry, it wouldn't let me attach images initially because I am new. I have added a link to the desired effect
    – smart alec 43
    Commented Nov 23, 2010 at 21:31
  • 2
    The imageshack link is broken. The (new) image should be embedded instead.
    – Sebastian Zartner
    Commented Feb 11, 2016 at 7:29

1 Answer 1

Reset to default
5

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.