Home/ Questions/Q 6590297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:16:55+00:00

I wonder if it’s possible to apply svg filter to clipped html content. All

  • 0

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 want the yellow circle to drop a shadow.

Tried adding filter=url('#dropshadow') / style='filter:url(#dropshadow)' to circle / clipPath / div elements, but none of these worked.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

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

    Here’s a full example.

    • 0