用SVG的图片格式如何划入更改图片的颜色？

第一种效果用阴影的方法进行控制，如果划入则显示阴影，移除在显示原有图片

效果展示
划入前：

划入后：
 

HTML的内容
<ul class="nav_item svgcolor">
  <li>
    <a href="/insidecontent/4rgwrgqz3z2xh3fqe2jda0tjnb"><span class="imgsize" style="float: left;">
       <img src="http://192.168.1.252:8080/Media/Domain/健康.svg"></span>康复运动与健康
    </a>
  </li>

     css的内容

.svgcolor li{

img{

position: relative;

margin-bottom: .1rem;

filter: drop-shadow(#165AB7 25px 0);

}

}

.imgsize{

display: inline-block;

width:25px;

margin-right:5px;

height:34px;

overflow: hidden;

margin-top:-1px;

}

.svgcolor li:hover{

img{

left: -25px;

}

}

 

第二种方法：将img 引入的图片动态变成svg的标签，在用样式进行设置

参考网址：https://github.com/iconfu/svg-inject/

1、进行安装(我的项目是vue通过脚手架进行安装的，根据自己的项目，如果你是普通的项目下载好直接引用就可以)

$ npm install @iconfu/svg-inject

2、进行引用(全局引用：main.js中)

import "@iconfu/svg-inject"

3.更改HTML：

<img :src="GLOBAL+'/Media/'+informationItem.image.paths" alt="" οnlοad="SVGInject(this)" width="25" height="25" >

4、设置样式：

svg{

fill:#6e6e6e !important;

}

完成啦！！！