Css Duotone SVG过滤器在Firefox中不工作

我有一个可以在除FireFox之外的所有浏览器上运行的浏览器。我认为从44-45更新可能会像一些人在其他Firefox相关问题中指出的那样，但这并没有做到

Firefox从v43开始就支持SVG过滤器，Modernizer也支持SVG过滤器，所以我只能相信过滤器本身有问题

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 -->

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

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

但这并没有解决我的问题

---

你知道还有什么原因吗？

你的过滤器不是问题所在。问题在于svg类上的“display:none”。这将删除svg内容（以及它可能包含的任何定义）。将其更改为“显示：隐藏”，所有这些都可以正常工作

---

（仅供参考，您的灰度不是标准的）

我猜您的CSS位于外部文件中，因此Firefox无法理解哈希url

url（#id）

是一个相对url。通过在其所在文件的名称前加前缀，将其转换为绝对URL

过滤器：url（#id）

只是

过滤器的简写：url（style.css#id）

这并不意味着什么

您需要在URL中输入html或svg文件的名称

过滤器：url（hello.svg#id）

将适用于Firefox。这就是为什么它在html/svg文件中工作的原因，当然，在这种情况下，前缀文件名指向正确的位置。
Brilliant，我完全忽略了显示属性，这可能是导致此问题的原因。谢谢代码笔更新。
<div class="tile" style="filter: url(#duotone_darkblue);"></div>