前言
修改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标簽通過路徑使用
<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> 
1433614-20190819162456643-999872833.png
使用後
<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> ![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)