如何使用 SVG 过滤器将白色图像反转为黑色？

Posted 2023-03-06

【中文标题】如何使用 SVG 过滤器将白色图像反转为黑色？

【英文标题】：How to Invert a White image to Black using SVG Filters?

【发布时间】：2013-07-26 06:32:34

【问题描述】：

有没有办法使用 SVG 滤镜将白色图像反转为黑色？

在 CSS 过滤器中，我们使用 -webkit-filter:invert(1);，这在 IE10 中不起作用。我正在应用 SVG 过滤器作为后备。任何人都可以帮忙吗？

【问题讨论】：

从 4.0 版开始，实际上 IE 有一个用于反转的过滤器。结帐msdn.microsoft.com/en-us/library/ms533008(v=vs.85).aspx

【参考方案1】：

您可以使用 SVG 过滤器进行反转：

<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 
                                                              0 -1 0 0 1 
                                                              0 0 -1 0 1
                                                              0 0 0 1 0"/>

有关更多详细信息，请参阅feColorMatrix at MDN 上的文档

【讨论】：

对我来说，这不起作用，直到我在 Inkscape 中应用了过滤器，它创建了一大堆链式过滤器（可根据要求提供）。

我没有给你完整的过滤器代码 - 只是核心原语查看我链接的文档以了解如何执行此操作。