Search code examples
cssfirefoxsvgfiltersvg-filters

Duotone SVG filter not working in Firefox

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:

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

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: 

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

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

Any ideas what else could be the cause here?

Solution

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