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

文章介绍了如何通过CSS的filter属性,特别是drop-shadow滤镜,来实现SVG图标的颜色变换。首先创建一个图标容器并设置背景颜色,然后将图标移出容器,利用drop-shadow生成白色阴影模拟颜色变化,通过调整阴影位置达到图标颜色变换的效果。这种方法适用于不支持内联SVG颜色修改的场景。
摘要由CSDN通过智能技术生成

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>

页面的效果

请添加图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不断蜕变灬青春

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值