前端开发日常 | 如何改变svg图标颜色?#前端开发

大家好，我是龙仔。今天来聊一下前端中使用的SVG图片。都知道前端中使用的字体图标都是可以通过改变它的color属性来改变图标的颜色的。但是SVG图片如何快速的改变图片的颜色，而不必要引入另外一张不同颜色的SVG图片。今天就主要来实践一下到底如何来改变SVG图片的颜色。下面来看一下具体代码。

接下来就通过代码来改变一下SVG图片的颜色，具体来看一下代码如何实现。这里需要简单先说一下，这里是VO3的项目，使用SVG图片用到了Vita plug键、SVG icon这样的库。这个库可以很方便的使用SVG图标。这个库的一些具体细节大家可以参考官方的文档，看它是如何来使用的。

首先这里来看一下，这里就是使用SVG的图片，这里引用的是menuSVG这样的图标。现在可以看到它是黑色的，如何来实现？当鼠标移入上去让它呈现不同的颜色。这里先给大家来一个提供第一个方案，也是近期在项目中使用的方案。

其实在CSS中有一个属性是叫currentColor，是什么？就是当前元素。如果给它fill设置了currentColor，就会去取当前的标签的color属性。比如它是有一个style，style里面有一个color属性，就会取color属性。

fil是什么？file是SVG图标的填充颜色，比如现在是黑色的，可以看到刚才其实它就是一个000，它就是一个黑色的，正是因为它是000，所以它呈现了一个黑色的样式。

现在把它改成currentColor，就是让它来继承color属性的颜色。在这里用icon-Wrap包裹了一下svg图标。接下来就可以看一下，来给icon-Wrap定义一个color属性，并且在这个它有一个滑动的效果，就是滑上去的以后，鼠标滑上去以后，呈现一个其他另外一个颜色。

可以看到颜色已经生效了，最开始是一个红色的，当鼠标移上去以后，它变成了一个紫色的效果。这里主要的用到的知识点就是currentColor，它会继承color属性这样的效果，这样就没有必要在项目中同一个图标。

因为在项目中有很多地方都是最开始是一个不活跃的状态的颜色，当鼠标放上去以后，它是一个活跃状态的颜色，两个颜色是不一样的。如果是为了一个颜色的不同而去引入两个只有颜色不同的图标，这样就太浪费资源了。所以可以通过代码的形式改变cSS，直接来实现颜色的切换。

今天的分享就到这里，希望对大家有所帮助。