javascript - 我有一个白色图标 - 如何在不将其替换为 CANVAS 的情况下将其变为黑色？这是一个.png图标

Question

我正在寻找可用于对我的一些图标图像应用滤镜的脚本/库。它们是白色的，我希望它们是黑色的。我有一些限制:

• 我无法为其创建新的 png
• 我无法更改实现(因此我无法使用其他图标，如 FontAwesome 等)
• 我必须使用相同的 <img>元素所以我不能使用 <canvas> .因此，我希望新的、转换后的图像具有与替换图像完全相同的结构。

到目前为止我已经尝试了Filtrr和 Caman但他们使用 <canvas>元素。 fabric.js做同样的。

您知道其他实现此目的的方法吗？它必须在 Firefox/Chrome/Safari 中工作，所以没有 IE。也接受 CSS 而不是 JavaScript，但据我所知和测试，使用 filter: invert在 CSS 中在 Firefox 中不起作用。

谢谢!

---

示例:我不知道示例对我的情况有多大用处，但这里是:

我有这个:

<div class="icon">
    <img src="myicon.png" data-activepath="activemyicon.png">
</div>

myicon.png是一个白色图标，我想在浏览器中将其设为黑色。我怎样才能做到这一点(使用 CSS 或 JS)并保持相同的 HTML 结构和元素？

---

修复:请注意，有 2 个答案可以解决此问题。不幸的是我只能接受一个答案。所以他们在这里:

• > the CSS version
• > the JS version

Answer 1

因为你不需要支持 IE，你可以使用这个 CSS 过滤器:

.icon img{
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
  -webkit-filter:invert(100%);
  filter: invert(100%);
}

这也适用于当前版本的 firefox。