Skip to content Skip to sidebar Skip to footer
Home / Html / Svg

Add Filter To Clipped Element In Svg (combine Clippath And Filter Elements)

Post a Comment
I wonder if it's possible to apply svg filter to clipped html content. All demos I found have clipping and filtering separate. Here's an example: http://jsfiddle.net/B7593/1/. I wa

Solution 1:

I don't think you can do it the way you're approaching it - even if you could make the shadow a part of the clip, you wouldn't see it when you applied the clip because none of the colour is retained, just the opacity of the pixels is used to determine what shows through. What will work (in Firefox at least), is to apply both the clip and the filter to content within the SVG like this:

<gfilter="url(#dropshadow)"><foreignObjectwidth="300"height="300"clip-path="url(#c1)"><body><divid="target"></div></body></foreignObject></g>

Here's a full example.

Post a Comment for "Add Filter To Clipped Element In Svg (combine Clippath And Filter Elements)"