How to apply drop-shadow filter via CSS to SVG specific element/path
Solution 1
You can apply a shadow selectively by doing color selection on the object you want to shadow, creating a shadow and then merging it under the original graphic. But you have to do it via the SVG filter trapdoor in CSS Filters - which doesn't work in IE. (So ... hacky, but possible)
Spec is here: w3.org/TR/SVG11/filters.html#feColorMatrixElement
Demo toy is here:
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices
That matrix doubles the opacity of all red values, zeros out the opacity of everything else and then subtracts 1. The effect is to only leave things at 100% opacity that are rgb(255,0,0)
#mySVG {
filter: url(#selective-shadow);
}
.shadow {
fill: red;
}
<svg>
<defs>
<filter id="selective-shadow">
<feColorMatrix type="matrix" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
2 0 0 0 -1"/>
<feGaussianBlur stdDeviation="3"/>
<feOffset dy="2" dx="2"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<svg height="150" width="150" id="mySVG">
<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>
Solution 2
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
Chrome 81 + Canary 83:
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
.
Firefox 75 + Firefox 53 (pre-quantum):
Looks pretty good for both SVG and HTML objects.
Safari 13+
Safari briefly had dropshadows on earlier versions but has dropped them again.
Safari 10.1 - 11
Safari has fixed this issue in the 10.1 (and maybe the 10.0) series.
Safari 9.x
SVG CSS dropshadow does not show and the div
dropshadow has less opacity for some reason
Edge (Chromium version)
No SVG dropshadows but the HTML ones work well.
IE11
Nothing.
Solution 3
In this CodePen I added different drop-shadows to path
and text
generated dynamically. Here I found a cross-browser solution that you can apply to a class
, for example, instead of #robbie img
(in the second link):
#robbie img { filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')"; filter: url(#drop-shadow); -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); }
In the first CodePen I commented another alternative way that does not use the classes, but it uses #numbers_dropshadows_filter
and #strokes_dropshadows_filter
defined in <defs></defs>
.
Cheers
Gruber
Updated on June 30, 2022Comments
-
Gruber almost 2 years
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?
-
Gruber over 8 yearsInteresting research, thank you! I can't test myself atm the polyfill, can you confirm that it's working on chrome too?
-
serraosays over 8 yearsI havent tried the polyfill, I'll have to do it tomorrow as I'm done for the day in my time zone. Let me know if you give it a shot.
-
Gruber about 6 yearsOh wow that's some advanced SVG hackery, and as far as I can see it works! Very nice! May I ask where the documentation for that matrix grid stuff is? :)
-
Michael Mullany about 6 yearsspec is here: w3.org/TR/SVG11/filters.html#feColorMatrixElement Demo toy is here: beta.observablehq.com/@gitmullany/…. That matrix doubles the opacity of all red values, zeros out the opacity of everything else and then subtracts 1. The effect is to only leave things at 100% opacity that are rgb(255,0,0)
-
Gruber about 6 yearsHoly SVG!! I didn't know you can do such things with SVGs, damn guess I need quite some update on this subject x) Thank you!