用 feColorMatrix 匹配 SVG 中的颜色

Posted 2023-03-06

【中文标题】用 feColorMatrix 匹配 SVG 中的颜色

【英文标题】：Matching a color in SVG with feColorMatrix

【发布时间】：2013-01-17 18:23:13

【问题描述】：

我在 SVG 中使用 SourceAlpha 作为阴影创建了一个投影，所以它是纯黑色的。使用feColorMatrix，我稍微降低了不透明度，但它仍然不像我想要的那样 - 我希望阴影的颜色与特定的颜色值相匹配。所以我更深入地研究了feColorMatrix。

现在我不使用SourceAlpha 作为阴影源，而是使用SourceGraphic。由于我的矢量图像是纯白色又名rgba(255, 255, 255, 1)，我可以这样计算阴影的颜色：

<feColorMatrix in="the-shadow" result="color-out" type="matrix"
                values="0.0157 0      0      0 0
                        0      0.3059 0      0 0 
                        0      0      0.7765 0 0 
                        0      0      0      1 0  "/>

结果应该是深蓝色阴影，又名rgba(4, 78, 198, 1)。

实际上这是可行的，我相信计算都是正确的，但是当使用相同颜色的 CSS3 创建阴影时，有一个明显的区别：SVG 过滤器似乎渲染颜色有点太浅。有什么办法可以解决吗？

【参考方案1】：

feColorMatrix 像大多数过滤器一样在线性RGB 颜色空间中运行。如果您想要 sRGB 颜色，请尝试将 color-interpolation-filters="sRGB" 设置为 feColorMatrix 上的属性。

    <svg  xmlns:xlink="http://www.w3.org/1999/xlink"
    
    viewBox="0 0 640 480" 
    xmlns="http://www.w3.org/2000/svg">
    
    <filter id="cm">
    
    <feColorMatrix in="SourceGraphic" type="matrix"
                    values="0.0157 0      0      0 0
                            0      0.3059 0      0 0 
                            0      0      0.7765 0 0 
                            0      0      0      1 0  "/>
    
    </filter>
    
    <filter id="cmRGB">
    
    <feColorMatrix color-interpolation-filters="sRGB" in="SourceGraphic" type="matrix"
                    values="0.0157 0      0      0 0
                            0      0.3059 0      0 0 
                            0      0      0.7765 0 0 
                            0      0      0      1 0  "/>
    
    </filter>
    
    <rect   fill="white" filter="url(#cm)"/>
    
    <rect y="50%"   fill="white" filter="url(#cmRGB)"/>
    
    </svg>

在 Firefox 上对我来说确实看起来不同。

【讨论】：

好主意，我什至不知道那个属性，但它并没有改变我的眼睛。

只是想说，当我尝试使用 feColorMatrix 作为着色器时，这对我有用——将 RGB 中的所有值设置为 0 并使用第 5 列的值来设置颜色。耶！

这里是a handy tool that converts RGBA to feColorMatrix。有关它的更多详细信息here。

【参考方案2】：

虽然我的回答重复了相同的想法，但我必须添加的内容太多了，无法发表评论。

我不确定，标准中的linearRGB 是什么，但我希望它是，呃，线性。 IE。白色转换为（变暗两次）

R | ½ 0 0 0 0
G | 0 ½ 0 0 0
B | 0 0 ½ 0 0
A | 0 0 0 1 0

应该产生与rgb(50%, 50%, 50%) 相同的颜色，不是吗？

以及用 (ligthen-twice) 转换的黑色

R | ½ 0 0 0 ½
G | 0 ½ 0 0 ½
B | 0 0 ½ 0 ½
A | 0 0 0 1 0

预计是相同的 50% 灰色。

但我实际看到的结果比预期的要轻得多，颜色选择器显示#BCBCBC 而不是#808080。另一方面，color-interpolation-filters="sRGB" 使结果正确（检查了默认设置的 macbook 和 win10 华硕笔记本电脑）。

https://jsfiddle.net/7wvy57fq/2/

【讨论】：

谢谢，所以它是“[a]（光能线性）线性化 RGB 颜色空间”，这不是很好的命名，因为这会导致抽象泄漏：作为一名程序员，我想使用 RGB 抽象，无需考虑实际感知的颜色。最重要的是这是不一致的：所有图形编辑器在 RGB 中线性工作（可能在 Photoshop 之后），所有其他矩阵线性工作。