SVG - Insert and drop shadow at the same time
how can i bring these two filters together?
<filter y="0%" x="0%" primitiveUnits="objectBoundingBox" id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"/>
<feOffset dx="0.006" dy="0.013" result="offsetblur"/>
<feFlood flood-color="black"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="inset-shadow" primitiveUnits="objectBoundingBox" x="0%" y="0%">
<feOffset dx="0.01" dy="0.02" />
<feGaussianBlur stdDeviation="0.01" result="offset-blur" />
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
<feFlood flood-color="black" flood-opacity="1" result="color" />
<feComposite operator="in" in="color" in2="inverse" result="shadow" />
<feComposite operator="over" in="shadow" in2="SourceGraphic" />
</filter>
<style type="text/css">
#mySvg g { filter:url(#drop-shadow);
filter:url(#inset-shadow); }
</style>
+3
source to share
1 answer
It depends on what you want to do (order matters), but you can, for example, combine two filters into one, for example:
<filter id="inset-and-drop-shadow" primitiveUnits="objectBoundingBox" x="0%" y="0%">
<feOffset dx="0.01" dy="0.02" />
<feGaussianBlur stdDeviation="0.01" result="offset-blur" />
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
<feFlood flood-color="black" flood-opacity="1" result="color" />
<feComposite operator="in" in="color" in2="inverse" result="shadow" />
<feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.0012" />
<feOffset dx="0.006" dy="0.013" result="offsetblur" />
<feFlood flood-color="black" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode/>
<feMergeNode in="inset-shadow" />
</feMerge>
</filter>
See fiddle .
+4
source to share