css改变img标签颜色,通过css 改变通过img标签引入的svg颜色

##### 前言 #####

修改svg颜色，一般直接修改文件的svg的fill属性就可以了，可以直接改svg属性，也可以通过css修改，但是前端一般都是通过img标签直接引入的svg图片，这样不管是从后期维护还是代码整洁度考虑，都更佳优秀，但问题也随之而来，没法通过css改变svg的颜色。

下面来介绍一种通过css改变通过img标签引入的svg颜色的方法

##### SVGInject #####

[svg-inject][] 是一个缓存解决方案将SVG文件内联注入到DOM的库。

##### 安装及使用 #####

###### 一、通过js标签直接引入 ######

下载 开发版 (v1.2.3): [svg-inject.js][]

下载 生产版(v1.2.3): [svg-inject.min.js][]

###### 二、通过 npm ######

$ npm install @iconfu/svg-inject

###### 使用 ######

我们可以看实际效果是svg文件最终相当于直接导入到了html中，所以操作的时候就特别方便了，比如改个颜色

使用时 只要将要控制的svg图片所在的img便签上加上οnlοad="SVGInject(this)"

###### 使用前 ######

可以看出没有使用οnlοad="SVGInject(this)"，图片是img标签通过路径使用

.svg-img g{

fill: blue;

}

![1433614-20190819162456643-999872833.png][]

###### 使用后 ######

使用οnlοad="SVGInject(this)"后，是直接将svg导入到dom中

.svg-img g{

fill: blue;

}

![1433614-20190819162418710-1825228272.png][]

##### 结语 #####

[svg-inject][] 库还有其他svg的操作方法，如果有兴趣可以去官网看看：[传送门][svg-inject]

[svg-inject]: https://github.com/iconfu/svg-inject

[svg-inject.js]: https://raw.githubusercontent.com/iconfu/svg-inject/v1.2.3/dist/svg-inject.js

[svg-inject.min.js]: https://raw.githubusercontent.com/iconfu/svg-inject/v1.2.3/dist/svg-inject.min.js

[1433614-20190819162456643-999872833.png]: /images/1604721231622.png

[1433614-20190819162418710-1825228272.png]: /images/1604721219175.png