Question

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

从v43开始，Firefox应该支持SVG过滤器，现代化也支持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 -->

应用过滤器的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”，一切正常。

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

Answer 2

我猜你的CSS是在外部文件中，因此Firefox无法理解哈希网址。

url(#id) 是相对网址。它通过在其前面放置文件的名称来转换为绝对URL。

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

哪个指向任何东西。

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

中

<强> filter: url(hello.svg#id);

适用于Firefox。这就是为什么它在html / svg文件中有效的原因当然前缀文件名指向正确的位置。

Duotone SVG过滤器无法在Firefox中运行

2 个答案: