Multiple filters for a single object in SVG

Question

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

I tried:

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?

Answer 1

You can add several effects to one filter, however, if you want to remove filters, first group the object, and then apply another filter to your object.

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

Answer 2

Start with the identifier feColorMatrix and, for example, name the result currentGraphic. Use this as an "in" for each set of filter elements / transaction start and as a "result" for the final batch operation. The following set of elements selects it in 'in' = 'currentGraphic', etc.