与SVG滤镜 - 优文库

在CSS着色单调的形象，我可以使图像灰度类似的东西：与SVG滤镜

.greyscale { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
}

我想有一个单调的图像，其中深色是说#11224F而不是黑色。有没有办法用SVG过滤器做这样的事情？

来源

2014-02-19 JKillian

第一行（五个值）提供的公式组件红色。接下来是绿色，然后是蓝色，然后是阿尔法。

这五个值是r，g，b和alpha的乘数，然后是要添加的偏移量。

因此，要生成一个基址偏移量为0x11的红色组件，您需要将其转换为十进制。 0x11 = dec 17，所以偏移值为17/255 = 0.0667。假设你希望等于r，g & b对灰度值的影响，只需将余数分成三部分，并使其成为所有三部分的乘数。因此，矩阵中的前五个值将为：

0.3111 0.3111 0.3111 0 0.0667

零表示我们不希望alpha有助于计算。

现在做同样为绿色和蓝色，你会得到：

"0.3111 0.3111 0.3111 0 0.0667 
0.2889 0.2889 0.2889 0 0.1333 
0.2301 0.2301 0.2300 0 0.3098 
0  0  0  1 0"

Demo here

来源

2014-02-19 12:22:33

是啊，伟大的答案感谢。我一直在想，使用偏移量会让事情变得糟糕（因为你会有非白色的颜色变成白色），但这种方法很有意义，看起来应该很好。 – JKillian

是的，你可以像使用feColorMatrix一样随意使用重新着色。例如

values =“.8 .8 .8 0 .1 .1 .1 0 0 .1 .1。0 0 0 0 0 1 0”会给您一个沉重的红色色调。我建立了一个互动feColorMatrix演示 - 叉它，并尝试值，以得到你想要的结果：

http://codepen.io/mullany/pen/qJCDk

来源

2014-02-19 04:24:28

回答

相关问题