svgsvg-filters

Multiple Filters for Single Object in SVG

I want to put two filters on my circle. (Maybe more)

I've tried doing:

filter="url(#f1);url(#f2)"

And:

filter="url(#f1,#f2)"

And:

filter="url(#f1 #f2)"

But none of them work. How can I approach this problem?

Solution

  • You could add multiple effects in one filter, however if you want to stack the filters up, first group the object and then apply the other filter to your object.

    <g filter="url(#f2)">
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"/>
</g>