Rectangle 27 0

html Add filter to clipped element in svg (combine clipPath and filter elements)?


<g filter="url(#dropshadow)">
    <foreignObject width="300" height="300" clip-path="url(#c1)">
        <body>
            <div id="target"></div>
        </body>
    </foreignObject>
</g>

Chrome and Opera's support for clipPath seems to be somewhat broken at the moment, especially embedded in HTML5 content. I'm not sure there's much you can do unless you're able to submit patches yourself.

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:

That's awesome, thank you! Maybe you can also give a few tips (or at least a google search query) about how to make it work in other svg-enabled browsers?

Note