Question

我想将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输出中显示完全黑色的图像。有谁知道反转滤波器的确切颜色矩阵是什么，它会为两种情况显示相同的输出？

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

Answer 2

使用 color-interpolation-filters =＆＃34; sRGB＆＃34; 解决了这个问题：＆LT; feColorMatrix color-interpolation-filters =＆＃34; sRGB＆＃34;在=＆＃34; SourceGraphic＆＃34;结果=＆＃34;反转＆＃34;类型=＆＃34;基质＆＃34; values =＆＃34; -1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0＆＃34; /＆gt;

在结构js中反转滤波器的矩阵是什么，它与svg中的反转滤波器相同？

2 个答案: