SVG 投影使 PNG 图像在 Firefox 中消失答案

【问题标题】：SVG drop-shadow makes PNG image disappear in FirefoxSVG 投影使 PNG 图像在 Firefox 中消失
【发布时间】：2014-11-08 08:28:41
【问题描述】：

我正在向 png 图像（具有透明度）添加跨浏览器兼容的投影。它适用于 Chrome 和 Safari，但在 Firefox 中，PNG 图像根本不显示。

这是我的网页，标题中带有手中的鳟鱼徽标 PNG 图像： http://parkerrichard.com/wordpress/

我正在使用 CSS 和 SVG 来显示阴影，如下所示：

.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')";
}

更新：带有 .shadowed 类的 SVG + 图像（复制到我的 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>

如果您对如何使此 PNG 在 Firefox 中带有投影有任何想法，请告诉我！感谢您的宝贵时间。

【问题讨论】：

抱歉，我忘记在我的 HTML 示例中包含该位。我已经添加了它
我说的不是这个：filter: url(#drop-shadow);表示过滤器：url（我写的文件#drop-shadow）所以如果那不是html文件，它将无法工作。
那么在#drop-shadow 之前，我是否要在包含SVG 的文件中添加一个html 路径名？我没有完全关注你，我很抱歉

标签： css firefox svg

【解决方案1】：

filter: url(#drop-shadow);

Firefox 的问题是：Can not find it。将svg 标签移动到正文顶部，也许你的问题已经解决了。这个链接也可能有用
Creating a True Cross-Browser Drop Shadow Effect With CSS3 & SVG

【讨论】：

谢谢@Hamix，我知道问题出在哪里。我创建了一个新文件“shadow.svg”，添加了 svg 代码，并尝试将过滤器链接到该文件。我的网站基于 WordPress，我很难找到正确的路径名。我现在尝试这样做无济于事： filter: url(wp-content/themes/troutinhand/shadow.svg#drop-shadow);
知道了！将过滤器路径更改为“../../shadow.svg”并做到了。感谢您的帮助@Hamix！

【解决方案2】：

Firefox 现在接受过滤器。

所以你可以使用类似的东西：

.shadowed {
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=6, Color='#444')";
  filter: drop-shadow(4px 6px 9px rgba(0,0,0,0.77));
}

【讨论】：

很高兴听到这个消息，感谢同志的提醒