8

我在 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 过滤器似乎渲染颜色有点太亮了。有没有办法解决这个问题？

4

2 回答 2

11

feColorMatrix 像大多数过滤器一样在线性RGB 颜色空间中运行。如果您想要 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 上对我来说确实看起来不同。

于 2013-02-02T15:21:51.363 回答
1

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

我不确定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%)，不是吗？

以及用 (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/

于 2016-07-01T09:51:57.013 回答