SVG Drop Shadow - opacity, feOffset and viewBox difficulties
I want to apply a simple drop shadow to an SVG file. Since this is really my first dive into SVG filters, I'm stuck and can't seem to find a solution to the (possibly simple) problem: why is feColorMatrix
n't it applied to the shadow?
Here is the filter:
<defs>
<filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120">
<feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
<feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/>
<feColorMatrix in="the-shadow" result="color-out" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 0.1 0"/>
<feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>
</filter>
</defs>
Also, is it possible that FireFox is ignoring feOffset
? Or is there something wrong with the syntax?
Pro: In all browsers, the shadow appears to be clipped at the top and left. The svg (in tag img
) is 22px x 22px large and I've already zoomed in viewBox
:
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
But still no luck. My CSS file img
has no set width or height, so I believe it has something to do with SVG.
source to share
1) Your filter area is probably too small. You can increase the defaults (although the defaults: (-10%, -10%, 120%, 120%) are usually sufficient for normal drop shadows.)
2) Also, as Robert mentions, your last filter is not properly connected.
Here's a version that seems to work consistently across the browser - exaggerated so you can see clearly.
<filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
<feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/>
<feColorMatrix in="the-shadow" result="color-out" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 .5 0"/>
<feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
</filter>
</defs>
source to share