I want to apply a simple drop shadow to an SVG file. As this is really my first dive into SVG filters, I am stuck and can't find a solution for the (probably simple) problem: Why is the feColorMatrix
not being 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 ignores feOffset
? Or is there something wrong with the syntax?
Plus: In all browsers, the drop shadow seems to be clipped off at the top and on the left side. The svg (in an img
tag) is 22px x 22px big and I already enlarged the 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. In my CSS file the the img
has no set width or height, so I believe it has something to do with the SVG.
Best Answer
1) Your filter region is probably too small. You can enlarge the default values (although the default values: (-10%, -10%, 120%, 120%) are usually enough for normal drop shadows.)
2) Also - as Robert mentions - your final filter is not wired up correctly.
Here is a version that seems to work consistently cross browser - exaggerated so you can see clearly.