經過css 改變經過img標籤引入的svg顏色

前言

修改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