SVG 滤镜 - feColorMatrix 具有非线性颜色

Question

我正在尝试使用 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? I looked and couldn't find anything other than a brief mention of filters using the sRGB color space 中定义的。是这个原因吗？

color-interpolation-filters has no affect for Filter Functions. Filter Functions must operate in the sRGB color space.

问题 #2：如何从 RGB 三元组转换为该色标，使生成的颜色与 RGB space相匹配？

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

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

TIA！

Answer 1

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

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

(‘color-interpolation-filters’ has an initial value of linearRGB

(187, 187, 187) 是当您在 linearRGB space 中执行 50% 然后使用 sRGB 吸管测量结果时发生的情况。为了覆盖它，您必须将 color-interpolation-filters="sRGB" 放入您的滤镜元素中。

这是一种非常好的转换颜色的方法。正如罗伯特在评论中提到的那样 - 你也可以使用洪水和合成来做到这一点。

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

SVG 滤镜 - feColorMatrix 具有非线性颜色

SVG Filter - feColorMatrix has non-linear color

svg

svg-filters

color-space

colormatrix