用于IE11滤波器的CSS

Question

我需要使用过滤器对svg图像，以改变颜色，但它不工作在IE上。

我已经看到，这是因为它没有得到支持，但我需要另一种方法来做到这一点。我需要改变颜色，填充不是一个选择。有办法让过滤器工作在IE上吗？

滤光片:亮度(0)、饱和度(100%)、倒置(100%)、纵隔(0%)、饱和度(25%)、旋转(70度)、亮度(108%)、对比度(108%)；

Answer 1

您不能在IE11中使用CSS筛选器，作为解决办法，您可以使用SVG过滤器标记。CSS过滤函数及其等效SVG过滤器标记在MDN中列出。但是，在使用SVG过滤器标记时，有时显示会有一些不同，您也可以在MDN中的示例中看到这一点。

我举了一个例子，它相当于css样式的filter: invert(100%)，它可以在IE11中工作：

​

<svg width="100" height="100" id="svg-filter" xmlns="http://www.w3.org/2000/svg">
        <filter id="invert">
            <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0" />
                <feFuncG type="table" tableValues="1 0" />
                <feFuncB type="table" tableValues="1 0" />
            </feComponentTransfer>
        </filter>
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" filter="url(#invert)" />
</svg>

​

有关更多信息，您还可以参考这篇文章。