龙空技术网

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

前端龙仔 45

前言:

如今我们对“svg样式设置”大体比较关切,同学们都想要剖析一些“svg样式设置”的相关知识。那么小编在网上网罗了一些对于“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,直接来实现颜色的切换。

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

标签: #svg样式设置