html 的img标签显示svg图片的情况下，可以通过css控制图片颜色吗

有这么一种情况，我们把鼠标悬浮在图片上的时候，希望图片显示其他颜色，所以我用svg显示图片，但据我了解，svg的颜色是可以通过css控制的，所以我想知道我们使用img标签显示svg图片的时候，能否在外部动态控制图片颜色

img

img

但是我发现上述无效

找到svg中需要改变颜色的地方，使用以下代码就可以实现

svg g {
stroke: red;
}

img

js 找到元素 动态赋值样式


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
:root {
  --self-color: red;
}
#div1 {
  background-color: var(--self-color);
}


</style>
</head>
<body>
<div id="div1">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
<br>


</body>
<script>
    setTimeout(() => {
        let rootStyle = document.querySelector(':root')
        rootStyle.setAttribute('style', '--self-color: #eee')
    }, 2000)
</script>
</html>

借助var,当你拿到动态的属性时，就调用js那段去修改

querySelect获取到相应元素，去设置样式

背景色不清楚，改變svg裏的那個图的颜色倒是知道

只有直接在HTML中嵌入的SVG代码才可以通过css控制，使用img标签显示的svg图片不可以通过css控制
要改变img标签显示svg图片的颜色只能通过css3中的滤镜来实现, 参考
https://blog.csdn.net/weixin_48610566/article/details/124512892

svg 背景透明的吗？ 那可以直接改变background-color来实现假变色
如果需要改变svg 本身图片的颜色 ，可以直接在html中使用svg 再根据css来控制颜色或直接修改svg源码的颜色