css - 为什么这个 svg 不受过滤器的影响？

Question

This question要求使用 css 更改 svg 的颜色。我原以为可以通过过滤器实现这一点，但我遇到了问题。

我可以用 css 滤镜模糊图像，但我不能改变颜色。好像是从this article ，应该可以使用过滤器调整背景图像 svg 的颜色。我哪里出错了？

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

.blur {
  filter: blur(3px)
}

.color {
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

<button class="btn-icon blur"></button>
<button class="btn-icon color"></button>

Answer 1

您有两个主要问题:

1. 有错字。 .color: 应该是 .color。
2. 如果您 hue-rotate() 黑白图像，则不会发生任何事情。您只会得到相同的黑白图像。 #000000 就变成了#000000。白色也一样。这同样适用于大多数其他 CSS 过滤器原语。唯一可以真正添加任何颜色的是 sepia() 过滤器。而且似乎您必须跳过很多环节才能从中获得有用的颜色。

这是一个示例，其中的过滤器集是从其他地方的另一个示例中借来的。

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

.blur {
  filter: blur(3px)
}

.color {
  filter: invert(100%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
 }

<button class="btn-icon blur"></button>
<button class="btn-icon color"></button>