I want to have a drop shadow on a transparent SVG element.
I have tried using all different kinds of filters but to no avail. css3 filters on the svg element(filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
), the new dropshadow filter(<feDropShadow>
), the old filters:
<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
This can be achieved using css3 box-shadow Codepen
I expect to have a dropshadow on a transparent element but the actual transparent element clips over the dropshadow(so the element itself is transparent, but has an neon like outer glow)
I want to be able to control:
- blur
- spread
- color
Any help will be appreciated :)