在项目开发中svg还是常常用到的,关于一些需求就是在选中高亮和没有选中的时候图标为两个样式,其中最为常见的高亮就是颜色了,所以在这记录了一下第一次碰到svg样式的坑。首先设计给的svg是一个白色的图标,在需求中是下面图这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/64e0f6d13811cb5a713308f63605d375.png)
有人说可以用iconfont生成相应的颜色图标,然后用两个盒子分别装两个状态下的图标最后用v-if来控制就可以啦,我想说的是我也烤炉过确实可以实现,但这里是鼠标移入移除事件,这个方法一直创建销毁不是很好吧,反正我就没用。我是通过改掉svg的默认填充颜色在添加自己需要的颜色来实现的。上东西:
![](https://i-blog.csdnimg.cn/blog_migrate/24e2cc3fb10ea0c3522ffbd62914b849.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9f5b93ca1279381c90a379656cafb7b8.png)
首先在你要用的svg文件里吧默认的fill和stroke两个属性删除,要不后面你在类名里添加属性去修改是不会起作用的。
![](https://i-blog.csdnimg.cn/blog_migrate/885955e33c9d441924aaa0bde81d64d9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1fac714132a952d9b353035f773d8652.png)
删掉之后你就可以直接在svg的类名里添加fill和stroke两个了,对应哪个图片中有啦,要是理解不懂文字就自己动手试试,反正也就两个,换一次就可以了,最后高亮的样式同样再用fill和stroke这两给就好了,这里用法和普通高亮一样的,不啰嗦了。