Parker Richard Parker Richard - 3 months ago 44
CSS Question

SVG drop-shadow makes PNG image disappear in Firefox

I'm adding a cross-browser compatible drop-shadow to a png image (with transparency). It works in Chrome and Safari, but in Firefox the PNG image simply doesn't display at all.

Here's my webpage with the trout in hand logo PNG image in the header:
http://parkerrichard.com/wordpress/

I'm using CSS and SVG to display the drop-shadow as follows:

.shadowed {
-webkit-filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}


UPDATE: SVG + image with class of .shadowed (copied into my html):

<img src="images/logo.png" class="img-responsive shadowed center-image animated fadeIn">

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="20" dy="20" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>


Please let me know if you have any ideas on how to make this PNG appear with a drop-shadow in Firefox! Thank you for your time.

Answer

filter: url(#drop-shadow);

The Firefox problem is that : Can not find it. Move svg tag to the top of body, maybe your problem was solved. This link may also be useful
Creating a True Cross-Browser Drop Shadow Effect With CSS3 & SVG

Comments