Duotone SVG 过滤器在 Firefox 中不起作用答案

【问题标题】：Duotone SVG filter not working in FirefoxDuotone SVG 过滤器在 Firefox 中不起作用
【发布时间】：2016-07-02 14:44:48
【问题描述】：

我有一个CodePen with Duotone SVG filters，它适用于除 FireFox 之外的所有浏览器。我认为并从 44 到 45 进行更新可能会起到一些作用，正如一些人在其他 Firefox 相关问题中所指出的那样，但事实并非如此。

Firefox 应该从 v43 开始支持 SVG 过滤器，modernizr 也支持它，所以我只能相信过滤器本身有问题。

SVG 过滤器定义为：

<svg class="duotone-filters">
    <filter id="duotone_darkblue">
        <feColorMatrix type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" >
        </feColorMatrix>

        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0.003921568627 0.007843137255"></feFuncR>
            <feFuncG type="table" tableValues="0.1568627451 0.3803921569"></feFuncG>
            <feFuncB type="table" tableValues="0.2352941176 0.5725490196"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer>

    </filter>

    <filter id="duotone_redblue">
        <feColorMatrix type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" >
        </feColorMatrix>

        <feComponentTransfer color-interpolation-filters="sRGB"> 
            <feFuncR type="table" tableValues="0.00294117647058825 0.9372549019607843"></feFuncR>
            <feFuncG type="table" tableValues="0.11372549019607843 0.19215686274509805"></feFuncG>
            <feFuncB type="table" tableValues="0.403921568627451 0.1411764705882353"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer> 
    </filter>

    <filter id="duotone_bluedarkorange">
        <feColorMatrix type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" >
        </feColorMatrix>

        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.9882352941"></feFuncR>
            <feFuncG type="table" tableValues="0.1411764706 0.4862745098"></feFuncG>
            <feFuncB type="table" tableValues="0.2117647059 0.3176470588"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
    </filter>

    <filter id="duotone_blueorange">
        <feColorMatrix type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" >
        </feColorMatrix>

        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.9568627451"></feFuncR>
            <feFuncG type="table" tableValues="0.1411764706 0.5921568627"></feFuncG>
            <feFuncB type="table" tableValues="0.2117647059 0.1333333333"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
    </filter> 

    <filter id="duotone_seafoam">
        <feColorMatrix type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" >
        </feColorMatrix>

        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.1647058824"></feFuncR>
            <feFuncG type="table" tableValues="0.1411764706 0.6588235294"></feFuncG>
            <feFuncB type="table" tableValues="0.2117647059 0.5490196078"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
    </filter>

</svg> <!-- /.duotone-filters -->

应用过滤器的 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 过滤器的类似问题：

<div class="tile" style="filter: url(#duotone_darkblue);"></div>

但这并没有解决我的问题。

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

【问题讨论】：

标签： css firefox svg filter svg-filters

【解决方案1】：

我猜你的 CSS 在一个外部文件中，所以 Firefox 无法理解哈希 url。

url(#id) 是一个相对 URL。它通过在其所在文件的名称前面添加来转换为绝对 URL。

filter: url(#id);只是filter: url(style.css#id);的简写形式

它没有指向任何东西。

您需要将html或svg文件的名称放在URL中

filter: url(hello.svg#id);

适用于 Firefox。这就是为什么它在 html/svg 文件中当然可以工作的原因，因为在这种情况下，前置文件名指向正确的位置。

【讨论】：

【解决方案2】：

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

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

【讨论】：

太棒了，我完全忽略了显示属性是导致此问题的可能原因。谢谢。 Codepen 已更新。