Question

在CSS中，我可以使用类似于：

的图像制作灰度图像

.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过滤器做这样的事情？

Answer 1

第一行（五个值）提供红色的方程组件。接下来是绿色，然后是蓝色，然后是alpha。

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

因此，要生成基本偏移量为0x11的红色分量，需要将其转换为十进制。 0x11 = dec 17，因此偏移的值为17/255 = 0.0667。假设你想要r，g＆amp; 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

Answer 2

是的，您可以使用feColorMatrix自由地使用重新着色。例如

values =“.8 .8 .8 0 0 .1 .1 .1 0 0 .1 .1 .1 0 0 0 0 0 1 0”会给你一个沉重的红色调。我构建了一个交互式feColorMatrix演示 - 将它分叉并尝试使用值来获得所需的结果：

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

带SVG滤镜的着色单调图像

2 个答案: