lundi 30 mai 2016

How to apply a filter after a mask in SVG?

I have the following SVG:

<svg xmlns="http://ift.tt/nvqhV5" viewBox="0 0 100 100">
<mask id="mask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="33" fill="black"/>
</mask>

<filter id="dropShadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="4" dy="4"/>
        <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
        </feMerge>
</filter>

<circle cx="50" cy="50" r="50" fill="green" filter="url(#dropShadow)" mask="url(#mask)"/>
</svg>

It's basically a ring with a shadow.
The problem is that the shadow is not visible on the inside of the ring, because the filter is applied to the circle before it is masked.

But what I'm looking for is to apply the filter to the already masked object.
How can I do that?

PS: In this trivial example it doesn't make much sense to use a mask. It's just to explain the problem.




Aucun commentaire:

Enregistrer un commentaire