SVG 过滤器：调整颜色通道答案

【问题标题】：SVG filters: adjust color channelsSVG 过滤器：调整颜色通道
【发布时间】：2015-03-21 17:42:41
【问题描述】：

希望调整图像中绿色通道的色调值。具体来说，将绿色值（仅）更改为真正的深绿色或黑色。使用 svg 过滤器有什么想法吗？

【问题讨论】：

【解决方案1】：

你想要SVG feColorMatrix 和type="matrix"。然后丢弃红色/蓝色通道，将绿色与绿色相乘，使其更暗。

具体来说，要将 RGBA 图像转换为仅使用绿色通道并将其变暗一半（并且无论原始 alpha 是什么都具有完整的 alpha），您需要这些矩阵值：

/*R   G   B   A   1 */
  0   0   0   0   0   // R = 0*R + 0*G   + 0*B + 0*A + 0*1
  0  0.5  0   0   0   // G = 0*R + 0.5*G + 0*B + 0*A + 0*1
  0   0   0   0   0   // B = 0*R + 0*G   + 0*B + 0*A + 0*1
  0   0   0   0   1   // A = 0*R + 0*G   + 0*B + 0*A + 1*1

示例：http://jsfiddle.net/hkah9w4d/2/

<filter id="darkGreen">
  <feColorMatrix type="matrix" values="0  0  0 0 0
                                       0 0.5 0 0 0
                                       0  0  0 0 0
                                       0  0  0 0 1" />
</filter>

您不必像这样将值排列在网格中，但我更喜欢这样做，以便更清楚地了解发生了什么，并使其更易于编辑。

或者，您可以使用：

<feComponentTransfer>
  <feFuncR type="linear" slope="0" />
  <feFuncG type="linear" slope="0.5" />
  <feFuncB type="linear" slope="0" />
</feComponentTransfer>

编辑：重新阅读您的问题，我想知道您是否想保持红色和蓝色通道完好无损。如果是这样，您需要类似以下的值，将红色复制到红色和蓝色到蓝色，但将绿色通道变暗到其原始亮度的 40%：

<filter id="darkenGreen">
  <feColorMatrix type="matrix" values="1  0  0 0 0
                                       0 0.4 0 0 0
                                       0  0  1 0 0
                                       0  0  0 0 1" />
</filter>

示例：http://jsfiddle.net/hkah9w4d/7/

或者，您可以使用：

<feComponentTransfer>
  <feFuncG type="linear" slope="0.4" />
  <!-- the other channels will default to type="identity" -->
</feComponentTransfer>

【讨论】：

您也可能有兴趣比较仅使用绿色到绿色与 RGB 到绿色之间的差异：jsfiddle.net/hkah9w4d/6
在 RGB 通道上使用不同的权重是试图收集图像的真实亮度；您可以在我的答案中链接的feColorMatrix 文档中描述的luminanceToAlpha 选项中看到此示例（以及一些良好的权重值）。
谢谢！！顺便说一句-您知道将图像转换为灰度后调整 feColorMatrix 值的任何方法吗？（有点像 Photoshop 的做法。）
对不起，我不明白你的愿望。您能否澄清您的意见和期望的结果？
一般情况下，您可以使用 JavaScript 动态修改矩阵值，结果会更新。例如参见：jsfiddle.net/hkah9w4d/8