Css 将SVG中的颜色与feColorMatrix匹配

我在SVG中使用

SourceAlpha

为阴影创建了一个阴影，因此它是纯黑色的。使用feColorMatrix，我降低了一点不透明度，但仍然没有达到我想要的效果-我希望阴影的颜色与特定的颜色值匹配。因此，我对feColorMatrix进行了更深入的研究

现在我不使用

SourceAlpha

作为阴影的源，而是使用

SourceGraphic

。由于我的矢量图像是纯白色的aka

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  "/>

结果应该是一个深蓝色阴影aka

rgba（4,78,198,1）

---

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

像大多数过滤器一样，feColorMatrix在linearRGB颜色空间中工作。如果需要sRGB颜色，请尝试在feColorMatrix上将=“sRGB”设置为属性

---

虽然我的回答重复了同样的想法，但我要补充的内容太多，无法发表评论

我不确定标准中什么是

linearRGB

，但我希望它是，呃，线性的。即，使用（变暗两次）变换白色

应该产生与rgb（50%，50%，50%）相同的颜色，不是吗

以及使用（然后两次）变换的黑色

预计为相同的50%灰色

但我实际看到的结果比预期的要轻得多，颜色选择器显示的是

\BCBCBC

，而不是

\808080

。另一方面，

color interpolation filters=“sRGB”

会使结果正确（使用默认设置检查macbook和win10 ASUS笔记本）

---

好主意，我甚至不知道该属性，但它对我的眼睛没有任何影响。我只是想说，当我尝试使用feColorMatrix作为着色工具时，它对我很有效——将所有in RGB设置为0，并使用第5列VAL设置颜色。耶！给你。关于它的更多细节。谢谢，所以它是“[a]（光能线性）线性化RGB颜色空间”，这不是很好的命名，因为这会导致泄漏的抽象：作为一名程序员，我希望使用RGB抽象，不考虑实际感知的颜色。除此之外，这是不一致的：所有图形编辑器在RGB中线性工作（可能在photoshop之后），所有其他矩阵线性工作。

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

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