feColorMatrix 反转颜色在哪里出错了？

Question

我正在绘制对象并使用过滤器来反转颜色。但是，颜色显示不正确。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1">
<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"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>

颜色应该是这样的。 R 通道应该从 255 到 0。G 从 200 到 55。B 从 145 到 110。相反，它们分别映射到 0、174、220。

Answer 1

您需要设置color-interpolation-filters="sRGB"。否则，过滤器将使用linearRGB。

“线性”不是指用于编码网页颜色的数字，而是线性chromaticities。 CSS 颜色编码发生在具有非线性色度值的 sRGB 颜色空间中。如果使用linearRGB 颜色空间，过滤器计算将首先转换传入的 sRGB 值，然后执行颜色矩阵运算，然后再转换回来。这会导致您看到不明显的数字。

将过滤器执行设置为 sRGB 可以避免这种情况，但这并不是说一个结果比另一个结果更“正确”。这只是对颜色对立面的另一种解释。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1" color-interpolation-filters="sRGB">
<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"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>