I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I don't need the whole graphic to be shadowed, just an element inside it.
As you can see above, I'm trying to apply a drop-shadow to the red circle element of the SVG, but it's not working.
Searching around I haven't found any specific info on this, only few comments in other SVG related questions simply stating that it doesn't work on single SVG elements, but without much explanations.
UPDATE
As pointed out by @azeós in the comments, it is rendering correctly with Firefox (v. 43.0.2) so it's a Chrome specific issue. Is there anyway to make this crossbrowser without fiddling out with the SVG code as suggested in the comments?
Updated 2020-04: I did some experiments on this issue because I too couldn't find any information on this and the results are pretty inconsistent.
The TL;DR: SVG drop-shadows are very inconsistent but HTML drop-shadows reliably work (outside of IE11). If you want SVG drop-shadows, you're going to have use a polyfill or just do the drop-shadow within the SVG itself.
Codepen experiment: http://codepen.io/staypuftman/pen/GoNoMq
Neither Chrome nor edge Canary respect filter
or -webkit-filter
properly in the context of an SVG object drop-shadow but do work on a simple div
.
Looks pretty good for both SVG and HTML objects.
Safari briefly had dropshadows on earlier versions but has dropped them again.
Safari has fixed this issue in the 10.1 (and maybe the 10.0) series.
SVG CSS dropshadow does not show and the div
dropshadow has less opacity for some reason
No SVG dropshadows but the HTML ones work well.
Nothing.