前端图片标签引入svg图修改颜色

SVG图标换颜色操作

首先得有容纳图标的一个盒子，通过css造一个图标的‘影子’，设置‘影子’的颜色是白色，把图标本体移出盒子，让‘影子’占据其本体位置，之后对盒子设置溢出隐藏达到效果

用到了一个css中的filter: drop-shadow

// 语法
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); 

使用效果

// 样式
.weather-bgc {
    
    
	display: flex;
	justify-content: center;
	align-items: center;
	width: 480upx;
	height: 170upx;
	background-color: #339bf6;
	border-radius: 30upx;
	overflow: hidden;

	.svg-color {
    
    
		// transform: translateX(200upx);
		filter: drop-shadow(#fff -200upx 0px 0px); // 造了一个白色阴影，并且阴影位置在本体左侧200upx的位置
	}
}

<view class="weather-bgc">
	<image :src="`/static/weather-icons/${weather.icon}.svg`" mode="" class="svg-color"></image>
</view>

页面的效果

之后调整容器大小以及对原图进行平移操作让原图移出容器达到效果