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上确实与我不同。

Answer 2

虽然我的回答重复了同样的想法，但我要添加的内容对评论来说太过分了。

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

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%)产生相同的颜色，不是吗？

用（韧性 - 两次）转化的黑色颜色

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 ASUS笔记本）。

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

将SVG中的颜色与feColorMatrix匹配

2 个答案: