SVG: Multiple Effects in One Filter
You can use the result
attributes to give a name to a filter primitive element's output, think of it as a sort of filter-local id
attribute. You can then use that name as filter input with the 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 z z" fill="#2DA9D6" filter="url(#dropshadow)"></path>
</svg>
See fiddle.