将SVG中的颜色与feColorMatrix匹配

Question

我在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滤镜似乎使颜色有点太亮.有没有办法解决这个问题？

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上,我确实看起来与众不同.