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

问题描述

我正在尝试使用 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！

解决方法

因此，首先，不要相信您在规范中阅读的所有内容 - 特别是当它们不是 至少一个候选推荐。该过滤器规范已制定多年，许多与 SVG 1.1 spec 不同的内容尚未实施。

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

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

(187,187,187) 是当您在 linearRGB 空间中执行 50% 然后使用 sRGB 滴管测量结果时会发生什么。为了覆盖它，您必须在过滤器元素中放置 color-interpolation-filters="sRGB"。

这是转换颜色的完美方法。正如罗伯特在评论中提到的 - 您也可以使用洪水和复合来做到这一点。

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