css - 双色调 SVG 过滤器在 Firefox 中不起作用

Question

我有一个 CodePen with Duotone SVG filters它适用于除 FireFox 之外的所有浏览器。我认为从 44 更新到 45 可能会像某些人在其他 Firefox 相关问题中指出的那样解决问题，但并没有做到这一点。

从 v43 开始，Firefox 应该支持 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>

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

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

Answer 1

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

(仅供引用，您的灰度图不规范)