Multiple Filters for Single Object in SVG

svg svg-filters
Maurice Tempelsman picture Maurice Tempelsman · Jan 15, 2013 · Viewed 7.6k times · Source

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?

Answer

Badger Cat picture Badger Cat · Jan 15, 2013

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>

Related questions

SVG drop shadow using css3

Is it possible to set drop shadow for an svg element using css3 , something like box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; I saw some remarks on creating shadow using filter effects. Is there an …

Read More
How can I create a "glow" around a rectangle with svg?

I have something like the following: <svg id="svgLogo1" style="left:0; top:0; position:absolute" width="980" height="80" viewBox="0 0 980 80" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="5" width="980" height="54" rx="6" ry="6" style="stroke-width:2; xstroke:#FFF; fill:#555"/> </…

Read More
Dynamically change SVG image color in android

I know that using third party library, it is possible to use SVG image in Android. Library like: svg-android The code to load SVG image is like below: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Create a new ImageView …

Read More