Geek Answers Handbook

SVG: multiple effects in one filter

I am trying to implement multiple shadows into a single SVG filter, but I find that my question is more general than this: how to add multiple effects to a single SVG filter? In my case, here is specifically what I'm trying to do.

I have an SVG document that currently contains one path element, and I applied one shadow effect to this element.

My SVG document

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750"> <defs> <filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"></feGaussianBlur> <feOffset dx="12" dy="12" result="offsetblur"></feOffset> <feFlood flood-color="rgba(0,0,0,0.5)"></feFlood> <feComposite in2="offsetblur" operator="in"></feComposite> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 zz" fill="#2DA9D6" filter="url(#dropshadow)"></path> </svg>

Which gives me an SVG that looks like this:

enter image description here

Now I want to add a second (completely different) shadow to the same path element. For example, say a shadow that rises up and to the left of an element. In CSS, my whole shadow might look like this:

 box-shadow: 5px 5px 5px rgba(0,0,0,0.5), -5px -5px 5px rgba(0,0,0,0.5);

How can I make these few shadows using SVG filters? I considered this question , which suggests including several effects in one filter, but I'm not sure how to combine several effects in one filter.

Thanks for any help!

+6
source share
1 answer

You can use the result attributes to name the output element of the filter primitive, consider it as a kind of filter-local id attribute. Then you can use this name as a filter input with in or in2 attributes.

 <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750"> <defs> <filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> <feOffset dx="12" dy="12" result="offsetblur"/> <feOffset dx="-20" dy="-12" result="offsetblur2" in="blur"/> <feComponentTransfer result="shadow1" in="offsetblur"> <feFuncA type="linear" slope="0.5"/> </feComponentTransfer> <feComponentTransfer result="shadow2" in="offsetblur2"> <feFuncA type="linear" slope="0.2"/> </feComponentTransfer> <feMerge> <feMergeNode in="shadow1"/> <feMergeNode in="shadow2"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 zz" fill="#2DA9D6" filter="url(#dropshadow)"></path> </svg>

See fiddle .

+10
source

More articles:


All Articles