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.
.shadow {
fill: red;
-webkit-filter:
drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
filter:
drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}
<svg height="150" width="150">
<g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
</g>
<g class="shadow" >
<circle class="shadow" cx="100" cy="100" r="20"></circle>
</g>
</svg>
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?