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

不断蜕变灬青春

已于 2023-04-12 11:51:32 修改

阅读量1.8k

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

于 2023-04-12 11:45:03 首次发布

本文链接：https://blog.csdn.net/B1841630/article/details/130103524

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何通过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>