img引入svg如何修改颜色

在项目开发中，我们会经常使用到svg图标，svg改变宽高不失真和可随便设置颜色的特性真的很受我们前端喜爱。一般我们都会将svg全局封装为公共组件调用。

今天在这我们不讲它如何封装，而是谈谈如果通过图片img标签引入svg，我们又如何去修改它的大小和颜色呢？

一、如何修改svg大小

修改为图标组件，我们一般设置字体大小即可改变svg图标大小，这里使用图片引入svg，想改变大小，我们只需调整图片宽高即可。

二、如何修改svg颜色

下面我们主要讲如何设置颜色

主要有以下两种方法（已通过本人亲自验证，不会的可直接使用）：

截取了个项目实例

实现前：

实现后：

天气图标为引入的svg图片，未实现其颜色效果时为黑色，实现修改颜色后跟右侧的文字颜色相同。

方法1：

通过css中filter:drop-shadow

首先我们需要一个容纳图标的父盒子(下方实例中的.svg-img)，通过css造一个图标的‘影子’（.svg-color中的drop-shadow），然后设置‘影子’的颜色，再把图标本体移出父盒子，让‘影子’占据本体所在位置，最后后对父盒子设置溢出隐藏达到效果。

drop-shadow 语法：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color ) 
filter: drop-shadow( x轴偏移 y轴偏移 模糊半径 传播半径 投影颜色);

具体实现：

<div class="svg-img"> 
    <img class="svg-color" :src="svgUrl"> 
</div>

data() { 
    return { 
        svgUrl: require(`./icons/weather/100.svg`), 
    }; 
},

.svg-img { 
    width: 60px; 
    height: 60px; 
    overflow: hidden; 
    display: inline-block; 
    >.svg-color{ 
        width: 100%; 
        height: 100%; 
        transform: translateX(60px); 
        filter: drop-shadow(#684a2c -60px 0px 0px); 
    } 
}

备注：

translateX中的60px和drop-shadow中的-60px必须是一个相同的值，并且最好是大于等于宽高的最大值，这样设置得到的带颜色的阴影图片才会完整无误的重合在本体图片原本的位置上。 注意上方结构和cs

方法2：

通过mask-image 属性引入svg图标并使用 background-color 改变svg图标颜色

<img 
    class="svg-color" 
    :style="{ 
        WebkitMaskImage: `url(${svgUrl})`, 
        maskImage: `url(${svgUrl})` 
    }" 
>

data() { 
    return { 
        svgUrl: require(`./icons/weather/100.svg`), 
    }; 
},

.svg-color{ 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
    background-color: #684a2c; 
    -webkit-mask-repeat: no-repeat; 
    mask-repeat: no-repeat; 
    -webkit-mask-size: contain;
    mask-size: contain; 
}