前言
修改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便簽上加上onload="SVGInject(this)"
使用前
可以看出沒有使用onload="SVGInject(this)"，圖片是img標簽通過路徑使用
<html>
<head>
<script src="svg-inject.min.js"></script>
<style>
.svg-img g{
fill: blue;
}
</style>
</head>
<body>
<img class = "svg-img" src="image1.svg"/>
</body>
</html>
使用后
使用onload="SVGInject(this)"后，是直接將svg導入到dom中
<html>
<head>
<script src="svg-inject.min.js"></script>
<style>
.svg-img g{
fill: blue;
}
</style>
</head>
<body>
<img class = "svg-img" src="image1.svg" onload="SVGInject(this)" />
</body>
</html>
結語
svg-inject 庫還有其他svg的操作方法，如果有興趣可以去官網看看：傳送門