IE11 过滤器的 CSS

【问题标题】：CSS for IE11 filterIE11 过滤器的 CSS
【发布时间】：2019-08-06 11:04:44
【问题描述】：

我需要在 svg 图像上使用滤镜来更改颜色，但它在 IE 上不起作用。

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

滤镜：亮度（0）饱和（100%）反转（100%）棕褐色（0%）饱和（25%）色调旋转（70度）亮度（108%）对比度（108%）；

【问题讨论】：

基本上...没有。它只是不受支持。
还有其他方法可以解决这个问题吗？我说过我知道它不起作用，我需要找到解决方案。不管那是不是另一种方式。
很简单……没有。
那么我必须上传单独的 svg 的唯一解决方案是什么？
似乎很可能，但我不知道您是如何实现这一切的。我不确定 fill 不是内联 SVG 的选项。

【解决方案1】：

您不能在 IE11 中使用带有 CSS 的过滤器，作为一种解决方法，您可以使用 SVG filter markup。 CSS filter function and its equivalent SVG filter markup 在 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>

更多信息，您也可以参考this article。

【讨论】：