什么是织物 js 中的反转过滤器矩阵，其工作原理等同于 svg 中的反转过滤器？答案

【问题标题】：What is the matrix for Invert filter in fabric js that works equivalent to Invert filter in svg?什么是织物 js 中的反转过滤器矩阵，其工作原理等同于 svg 中的反转过滤器？
【发布时间】：2018-08-02 09:23:54
【问题描述】：

我想将fabric js中图像中的反转过滤器转换为svg。在这两种情况下看起来应该是一样的。我正在使用：new window.fabric.Image.filters.Invert() - 在fabric js。而在svg，我正在使用这个：

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

两种情况下的输出是不同的。它看起来有些相似，但并不完全相同。我也试过用这个：

new window.fabric.Image.filters.ColorMatrix({
                 matrix: [
                     -1,  0,  0,  0,  1,
                      0, -1,  0,  0,  1,
                      0,  0, -1,  0,  1,
                      0,  0,  0,  1,  0
                      ]
                 });

在这种情况下，这会在 fabric js 输出中显示完全黑色的图像。有谁知道反转滤镜的确切颜色矩阵是什么，它将在两种情况下显示相同的输出？

【问题讨论】：

确保在过滤器原语或其任何父元素上没有color-interpolation-filters="sRGB"。我知道，例如，当您使用其过滤器编辑器 UI 时，Inkscape 会偷偷地将其设置在 <filter> 元素上。 SVG 默认是 linearRGB，这也是 fabric.js 使用的。
如果您使用 CSS 声明中的过滤器，那么无论您在过滤器本身中声明什么，CSS 过滤器都会将颜色空间设置为 sRGB。双重技巧。
@ccprog 我没有在任何地方使用 color-interpolation-filters="sRGB" 。但是使用它之后，它工作得很好。感谢您提出这一点 :) 这对我帮助很大。

标签： svg fabricjs

【解决方案1】：

这是一个更好的反转：

    <filter id="invert">
      <feComponentTransfer>
          <feFuncR type="table" tableValues="1 0"/>
          <feFuncG type="table" tableValues="1 0"/>
          <feFuncB type="table" tableValues="1 0"/>
      </feComponentTransfer>  </filter>

【讨论】：

这不会改变任何东西并给出与它相同的输出：

【解决方案2】：

使用 color-interpolation-filters="sRGB" 解决了这个问题，如下所示：

【讨论】：