SVG 过滤器 - feColorMatrix 具有非线性颜色答案

【问题标题】：SVG Filter - feColorMatrix has non-linear colorSVG 过滤器 - feColorMatrix 具有非线性颜色
【发布时间】：2021-04-12 00:11:46
【问题描述】：

我正在尝试使用 SVG 过滤器来偏移并用特定颜色填充形状。调整我使用的颜色<feColorMatrix>。我知道颜色矩阵使用颜色的钳位值，所以我通过取 R、G、B 值 (0-255) 并将它们除以 256 来计算钳位值。

问题是，这产生了更浅的颜色。然后我用一个简单的 0.5 尝试了它，然后颜色选择了结果。我希望 rgb(128,128,128) #808080 的值或至少接近的值，但结果却是令人震惊的 rgb(187,187,187) #bbbbbb。

<filter id="midgrey">
    <feColorMatrix values="
        0 0 0 0 0.5
        0 0 0 0 0.5
        0 0 0 0 0.5
        0 0 0 1 0">
    </feColorMatrix>
</filter>

显然这里正在进行某种转换。经过一些测试，转换肯定是非线性的——某种指数重映射。

问题 #1：specification 中的定义在哪里？我看了看，除了brief mention of filters using the sRGB color space，什么也找不到。是这个原因吗？

color-interpolation-filters 对过滤器函数没有影响。过滤器函数必须在 sRGB 颜色空间中运行。

问题 #2：如何将 RGB 三元组转换为该色标，以使生成的颜色在 RGB 空间中匹配？

问题 #3：也许这是使用 SVG 滤镜转换颜色的错误方法。是否有其他方法可以用特定颜色填充形状？

（请注意，即使只为 #3 提供了答案，也可以回答所有三个问题）

TIA！

【问题讨论】：

Q1，是的，Q2 see the specification Q3 feFlood

标签： svg svg-filters color-space colormatrix

【解决方案1】：

所以，首先，不要相信你在规范中读到的所有内容——尤其是当它们不是至少一个候选人推荐。该过滤器规范已经制定多年，许多与SVG 1.1 spec 不同的东西尚未实现。

在 SVG 1.1（当前跨浏览器基线）中 - 过滤器在线性 RGB 空间中运行。来自 SVG 规范 (15.1)

(‘color-interpolation-filters’的初始值为linearRGB

(187, 187, 187) 是当您在线性RGB 空间中进行50%，然后使用sRGB 滴管测量结果时发生的情况。为了覆盖它，您必须将 color-interpolation-filters="sRGB" 放入您的过滤器元素中。

这是转换颜色的绝佳方式。正如罗伯特在评论中提到的那样 - 您也可以使用洪水和合成来做到这一点。

<filter id="flood-recolor">
  <feFlood flood-color="grey"/>
  <feComposite operator="in" in2="SourceGraphic"/>
</filter>

【讨论】：