如何通过代码点击修改img标签中SVG样式无需重新渲染

嘿，这个需求我之前做类似功能时碰到过，完全不用额外加载图片就能实现！给你两个实用方案，根据你的场景选就行：

方案一：内联SVG（最灵活可控） #

用<img>标签嵌入的SVG是独立的文档，没法直接修改内部元素的样式，所以最稳妥的方式是把SVG代码直接内联到HTML里，这样就能用CSS或JavaScript轻松控制颜色了。

步骤： #

1. 把原来的<img src="SVG_90_default.svg"/>替换成SVG的完整代码，直接放到#svgDiv里：

<div id="svgDiv">
  <!-- 这里粘贴你的SVG完整代码 -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118...">
    <!-- 你的SVG图形和文本元素 -->
  </svg>
</div>

2. 用CSS设置初始颜色和点击后的样式，如果需要点击切换（不是按住时才变），再加一点JS：

/* 初始样式，根据你的SVG原有颜色调整 */
#svgDiv svg {
  fill: #2d2d2d; /* 假设原来的图形/文本是深灰色 */
  transition: all 0.3s ease; /* 加个过渡动画更顺滑 */
}

/* 点击时的样式（按住状态） */
#svgDiv svg:active {
  fill: #ffffff;
}

/* 点击切换的持久状态类 */
#svgDiv svg.clicked {
  fill: #ffffff;
}

// 监听点击事件，切换状态类
const mySvg = document.querySelector('#svgDiv svg');
mySvg.addEventListener('click', () => {
  mySvg.classList.toggle('clicked');
});

这种方法的好处是可以精准控制SVG里的单个元素（比如只想让文本变白，图形不变），完全不受颜色限制。

方案二：CSS滤镜（适合保留标签的场景） #

如果不想改动现有结构，必须用<img>标签，那可以用CSS滤镜快速把原有颜色转成白色，不用修改SVG本身。

代码示例： #

#svgDiv img {
  transition: filter 0.3s ease;
}

/* 点击时应用滤镜：先把颜色转黑，再反转成白色 */
#svgDiv img:active, #svgDiv img.clicked {
  filter: brightness(0) invert(1);
}

同样如果需要点击切换状态，加上这段JS：

const svgImg = document.querySelector('#svgDiv img');
svgImg.addEventListener('click', () => {
  svgImg.classList.toggle('clicked');
});

注意：这个方法适合你的SVG是单一深色（比如黑、深灰）的情况，如果SVG里有多种颜色，滤镜会把所有颜色反转成补色，可能达不到预期效果，这时候还是方案一更合适。

内容的提问来源于stack exchange，提问作者CodeMan