通过css动态修改svg图片颜色通过css修改svg颜色，主要是通过filter属性，设定指定的颜色注意：给父元素添加o

//引用本地svg图片

<img src="./images/2.svg" :class="[item.isFitness?'icon':'icons']" />

//引用接口返回base64

<img :src="data:image/svg+xml;base64,返回值" :class="[item.isFitness?'icon':'icons']" />

通过css修改svg颜色，主要是通过filter属性，设定指定的颜色

.icons{
    position: relative;
    transform: translateX(-80px);
    filter: drop-shadow(#f00 80px 0);     
    border-left: 4px solid transparent;//防止drop-shadow主体超出视线隐藏后阴影消失       
    border-right: 4px solid transparent;
}

注意：给父元素添加 overflow:hidden; 隐藏原svg，显示修改颜色后的svg图片。

或者给兄弟标签，添加伪类 :after 用来遮挡原svg。因为不进行遮挡的话，页面会同时出现两张svg图片。