柔化图像矩阵 svg 过滤器中的颜色答案

【问题标题】：softening colors in a matrix svg filter for images柔化图像矩阵 svg 过滤器中的颜色
【发布时间】：2017-05-17 00:18:22
【问题描述】：

我需要使用一个图像滤镜，在 90% 处柔化红色，在 80% 处柔化绿色，在 70% 处柔化蓝色。比如我需要改造

rgb(255,255,255)

到

rgb(229,204,178)

(229=90%*255, 204=80%*255, 178=70%*255)。所以，我定义了一个 svg 过滤器如下：

<feColorMatrix in="SourceGraphic" type="matrix" values="0.9 0 0 0 0
        0 0.8 0 0 0
        0 0 0.7 0 0
        0 0 0 1 0"/>

不幸的是，过滤器无法按预期工作，因为它将白色图像转换为比颜色rgb(229,204,178) 描述的颜色更浅的颜色。请参阅JSFiddle 代码和结果。

也许我还没有很好地理解矩阵过滤器的工作原理。我怎样才能获得所描述的效果？（红色、绿色和蓝色分别减少了 90%、80% 和 70%）

【问题讨论】：

【解决方案1】：

您需要指定 sRGB 作为色彩空间。添加：

color-interpolation-filters="sRGB"

到您的过滤器元素，一切正常。

【讨论】：