用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;

}

完成啦！！！