Duotone SVG过滤器无法在Firefox中运行(Duotone SVG filter not working in Firefox)

我有一个带有Duotone SVG过滤器的CodePen，它适用于除FireFox之外的所有浏览器。我认为并且从44-45更新可能会像其他一些Firefox相关的问题中提到的那样，但是没有这样做。

从v43开始，Firefox应该支持SVG过滤器，现代化也支持它，所以我不得不相信过滤器本身有问题。

SVG过滤器定义为：

应用过滤器的CSS是：

.tile:nth-of-type(1) { filter: url(#duotone_darkblue); -webkit-filter: url(#duotone_darkblue); -moz-filter: url(#duotone_darkblue); -o-filter: url(#duotone_darkblue); -ms-filter: url(#duotone_darkblue); } .tile:nth-of-type(2) { filter: url(#duotone_redblue); -webkit-filter: url(#duotone_redblue); -moz-filter: url(#duotone_redblue); -o-filter: url(#duotone_redblue); -ms-filter: url(#duotone_redblue); } .tile:nth-of-type(3) { filter: url(#duotone_bluedarkorange); -webkit-filter: url(#duotone_bluedarkorange); -moz-filter: url(#duotone_bluedarkorange); -o-filter: url(#duotone_bluedarkorange); -ms-filter: url(#duotone_bluedarkorange); } .tile:nth-of-type(4) { filter: url(#duotone_blueorange); -webkit-filter: url(#duotone_blueorange); -moz-filter: url(#duotone_blueorange); -o-filter: url(#duotone_blueorange); -ms-filter: url(#duotone_blueorange); }

似乎有些人已经能够通过内联样式来解决SVG过滤器的类似问题：

但在我的情况下，这还没有解决问题。

有什么想法可能是什么原因在这里？

I have a CodePen with Duotone SVG filters which works across all browsers except for FireFox. I thought and update from 44 - 45 might do the trick as some have noted in other Firefox related questions, but that didn't do it.

Firefox supposedly supports SVG filters as of v43, which is supported by modernizr as well so I'm left to believe that there is something wrong in the filter itself.

The SVG filters are defined as:

The CSS applying the filters is:

.tile:nth-of-type(1) { filter: url(#duotone_darkblue); -webkit-filter: url(#duotone_darkblue); -moz-filter: url(#duotone_darkblue); -o-filter: url(#duotone_darkblue); -ms-filter: url(#duotone_darkblue); } .tile:nth-of-type(2) { filter: url(#duotone_redblue); -webkit-filter: url(#duotone_redblue); -moz-filter: url(#duotone_redblue); -o-filter: url(#duotone_redblue); -ms-filter: url(#duotone_redblue); } .tile:nth-of-type(3) { filter: url(#duotone_bluedarkorange); -webkit-filter: url(#duotone_bluedarkorange); -moz-filter: url(#duotone_bluedarkorange); -o-filter: url(#duotone_bluedarkorange); -ms-filter: url(#duotone_bluedarkorange); } .tile:nth-of-type(4) { filter: url(#duotone_blueorange); -webkit-filter: url(#duotone_blueorange); -moz-filter: url(#duotone_blueorange); -o-filter: url(#duotone_blueorange); -ms-filter: url(#duotone_blueorange); }

Seems some have been able to resolve similar issues with SVG filter by inlining the styles like so:

but that hasn't resolved the issue in my case.

Any ideas what else could be the cause here?

最满意答案

您的过滤器不是问题。问题是你的svg类上的“display：none”。这将删除svg内容（以及它可能持有的任何定义）。将其更改为“display：hidden”，一切正常。

（仅供参考，您的灰度不是规范的）

Your filter is not the problem. The problem is the "display:none" on your svg class. That removes the svg content (and any definitions it might be holding). Change it to "display:hidden" and it all works.

(FYI your grayscale is not canonical)

更多推荐