当前位置：首页 > news >正文

img引入svg如何修改颜色

news 2025/7/23 22:55:28

方法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>

<script setup>
import { ref } from 'vue';
import svgUrl from './icons/weather/100.svg'; // 使用import语法引入SVGconst svgUrlRef = ref(svgUrl); // 使用ref来创建响应式数据
</script>

.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必须是一个相同的值，并且最好是大于等于宽高的最大值，这样设置得到的带颜色的阴影图片才会完整无误的在本体图片位置上。

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

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

<script setup>
import { ref } from 'vue';
import svgUrl from './icons/weather/100.svg'; // 使用import语法引入SVGconst svgUrlRef = ref(svgUrl); // 使用ref来创建响应式数据
</script>

.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; 
}