經過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

相關文章
相關標籤/搜索