在矩阵 SVG 滤镜中柔化图像的颜色

Question

我需要使用一个图像过滤器，在 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%）

Answer 1

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

color-interpolation-filters="sRGB" 

到您的滤芯，一切正常。