关于svg中修改其颜色时遇到的坑

在项目开发中svg还是常常用到的，关于一些需求就是在选中高亮和没有选中的时候图标为两个样式，其中最为常见的高亮就是颜色了，所以在这记录了一下第一次碰到svg样式的坑。首先设计给的svg是一个白色的图标，在需求中是下面图这样的：

有人说可以用iconfont生成相应的颜色图标，然后用两个盒子分别装两个状态下的图标最后用v-if来控制就可以啦，我想说的是我也烤炉过确实可以实现，但这里是鼠标移入移除事件，这个方法一直创建销毁不是很好吧，反正我就没用。我是通过改掉svg的默认填充颜色在添加自己需要的颜色来实现的。上东西：

首先在你要用的svg文件里吧默认的fill和stroke两个属性删除，要不后面你在类名里添加属性去修改是不会起作用的。

删掉之后你就可以直接在svg的类名里添加fill和stroke两个了，对应哪个图片中有啦，要是理解不懂文字就自己动手试试，反正也就两个，换一次就可以了，最后高亮的样式同样再用fill和stroke这两给就好了，这里用法和普通高亮一样的，不啰嗦了。