SVG无法通过CSS修改悬停颜色问题求助

这个问题我碰到过好多次啦，核心原因是用<img>标签嵌入SVG时，外部CSS没法穿透修改内部元素样式——浏览器会把img里的SVG当成独立的外部资源，样式是完全隔离的，所以你写的hover样式根本碰不到SVG里的.circle元素。给你几个靠谱的解决办法：

方法1：内联SVG到HTML中 #

这是最直接有效的方案，把SVG代码直接写在你的.toggleCircle容器里，替换掉原来的<img>标签。这样外部CSS就能直接选中SVG内部的元素了：

修改后的HTML： #

<div class="toggleCircle" data-state="open">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <title>ic_toggle_on_1</title>
    <style> .circle { fill:#3165bd; } </style>
    <path class="circle" d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM6.78,11.73,3.17,8.12,4.58,6.7l2.2,2.2,4.64-4.63,1.41,1.41Z"/>
  </svg>
</div>

对应的CSS： #

.toggleCircle[data-state="open"]:hover .circle {
  fill: #047aXX; /* 替换成你想要的颜色 */
}

方法2：用<use>标签复用SVG（适合需要多次复用图标场景） #

如果这个图标在页面里要多次使用，不想重复写SVG代码，可以把SVG定义在页面的<defs>里，然后用<use>标签引用，这样同样能让外部CSS控制样式：

步骤1：在HTML的<body>开头（或<head>里的<svg>）定义SVG： #

<svg style="display: none;">
  <defs>
    <svg id="toggleIcon" viewBox="0 0 16 16">
      <title>ic_toggle_on_1</title>
      <path class="circle" d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM6.78,11.73,3.17,8.12,4.58,6.7l2.2,2.2,4.64-4.63,1.41,1.41Z"/>
    </svg>
  </defs>
</svg>

步骤2：在需要的地方引用： #

<div class="toggleCircle" data-state="open">
  <svg><use href="#toggleIcon"></use></svg>
</div>

步骤3：写CSS样式： #

/* 初始颜色 */
.toggleCircle .circle {
  fill: #3165bd;
}
/* 悬停颜色 */
.toggleCircle[data-state="open"]:hover .circle {
  fill: #047aXX;
}

方法3：用CSS滤镜模拟颜色变化（适合必须用<img>的场景） #

如果因为某些限制必须用<img>标签，那可以用CSS的filter属性来模拟颜色变化——不过这个只适合单色SVG，效果不如直接修改fill精准：

.toggleCircle[data-state="open"]:hover img {
  /* 示例：调整色相和亮度来改变颜色，你需要根据目标颜色调整参数 */
  filter: hue-rotate(90deg) brightness(1.2);
}

简单说，优先用方法1或方法2，这两种方案能完美控制SVG内部元素的样式，方法3是退而求其次的选择。

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