Javascript 用JS替换图像src更好，还是使用CSS过滤器来处理它更好？

我有一个带有图标的按钮，它的源代码是~4kb的SVG。当我将鼠标悬停在按钮上时，我希望图标颜色反转，从黑色变为白色。为了达到这种效果，是否最好使用CSS，例如：

#btn:hover #icon-img {
    -webkit-filter: invert(1);
    filter: invert(1); 
}

…还是直接操作图像源并添加白色图标更好（例如更快/最佳实践/内存更好）

document.getElementById('btn').addEventListener('mouseover', (e) => {
    document.getElementById('icon-img').src = 'white-image.svg';
}

---

使用

css

不要在每次

mouseover

事件中对图像发出额外的网络请求。

根据经验，css解决方案比基于JS的解决方案更好

CSS的主要问题（特别是关于新的花式功能）是支持：

正如您所看到的，如果您想支持IE，那就太倒霉了（尽管Internet Explorer 4.0到9.0实现了一个非标准且不推荐使用的筛选器属性）

---

正如@guest271314所指出的，您的JS解决方案将触发对服务器的新请求。。。你可以考虑使用精灵或数据URI来避免它。

如果你已经使用SVG，我想我最好的方法是改变<代码>填充< /代码>颜色。您只需确保您的SVG是内联的，而不是使用

标记。谢谢！我有很多SVG，所以我认为内联所有SVG有点过于维护密集。。。但这是个好主意！如果您使用模板引擎或脚本来为您做这件事，这并不可怕。只要给它一个文件名，它就能完成所有的工作。