css - 使用 feColorMatrix 匹配 SVG 中的颜色

Question

我使用 SourceAlpha 作为阴影在 SVG 中创建了一个投影，因此它是纯黑色的。使用 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 过滤器似乎渲染颜色有点太亮。有什么办法可以解决这个问题吗？

Answer 1

feColorMatrix 与大多数滤镜一样在 linearRGB 颜色空间中运行。如果你想要 sRGB 颜色，尝试设置 color-interpolation-filters ="sRGB"作为 feColorMatrix 的一个属性。

    <svg width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
    
    viewBox="0 0 640 480" height="100%"
    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 width="100%" height="50%" fill="white" filter="url(#cm)"/>
    
    <rect y="50%" width="100%" height="100%" fill="white" filter="url(#cmRGB)"/>
    
    </svg>

我在 Firefox 上看起来确实不一样。