经过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