通过img引入的svg如何修改颜色？

最新推荐文章于 2024-12-20 19:04:29 发布

浩浩不睡觉

最新推荐文章于 2024-12-20 19:04:29 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/weixin_47347505/article/details/125845705

本文探讨了如何处理SVG图片通过img标签引入后无法用CSS修改颜色的问题。通常，CSS对引入的SVG图片不起作用。一种解决方法是利用CSS3的滤镜和transform属性，但该方法可能会影响图片上的事件监听。当遇到img标签有hover等事件时，建议使用JavaScript动态修改img的src来改变SVG颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. SVG标签直接在页面中引用

/* 在css中可以直接修改svg的填充颜色*/
svg{
	fill: color;
}

2. svg图片通过img标签引入

由于svg图片的内容比较多，所以我们一般都选择通过img标签引入，但是，当我们引入之后，会发现修改不了svg图片的颜色了，此时的css对svg失效。

解决办法： 网上常见的解决办法是使用CSS3中的滤镜filter中的drop-shadow，来产生一个阴影，然后结合transform中的translate来移动到svg的位置，然后给它的父盒子添加overflow:hidden来实现效果。

<img src="./imgs/logo-black.svg" alt="" />
img parentBox{
	overflow:hidden;
}
img{
	/* color是颜色，move移动的距离*/
	transform:translateX(-move)
	filter:drop-shadow(color,move,0)
}