前言
修改svg顏色,通常直接修改文件的svg的fill屬性就能夠了,能夠直接改svg屬性,也能夠經過css修改,可是前端通常都是經過img標籤直接引入的svg圖片,這樣無論是從後期維護仍是代碼整潔度考慮,都更佳優秀,但問題也隨之而來,無法經過css改變svg的顏色。<br/> 下面來介紹一種經過css改變經過img標籤引入的svg顏色的方法css
SVGInject
svg-inject 是一個緩存解決方案將SVG文件內聯注入到DOM的庫。html
安裝及使用
1、經過js標籤直接引入
下載 開發版 (v1.2.3): svg-inject.js前端
下載 生產版(v1.2.3): svg-inject.min.jsgit
2、經過 npm
$ npm install @iconfu/svg-inject
使用
咱們能夠看實際效果是svg文件最終至關於直接導入到了html中,因此操做的時候就特別方便了,好比改個顏色<br/>github
使用時 只要將要控制的svg圖片所在的img便籤上加上onload="SVGInject(this)"npm
使用前
能夠看出沒有使用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中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的操做方法,若是有興趣能夠去官網看看:傳送門svg