如何为<img>标签中的SVG添加悬停效果？能否纯用CSS实现？

1. 用<img>嵌入的SVG能否通过CSS实现内部元素的悬停？ #

不能直接实现**SVG内部元素（如path、circle）**的悬停效果——因为<img>会把SVG作为独立文档加载，外部CSS无法穿透<img>的边界修改SVG内部样式。

不过你可以给<img>本身加全局悬停效果，比如调整透明度、滤镜：

.icon-img:hover {
  opacity: 0.7;
  filter: brightness(1.2);
}

但这种效果只能作用于整个图片，没法修改SVG内部的颜色、形状细节。

2. 实现SVG内部悬停效果的正确语义化方式 #

如果需要修改SVG内部元素的悬停状态，推荐以下几种符合语义化的方案：

方案一：内联SVG到HTML中 #

直接把SVG代码写在HTML里，SVG属于当前文档的一部分，外部CSS可以直接选中内部元素添加悬停效果，是最直接的方式。

示例代码：

<!-- 装饰性图标添加aria-hidden="true" -->
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

对应的CSS：

.icon path {
  fill: #333;
  transition: fill 0.3s ease;
}
/* 鼠标悬停时修改路径颜色 */
.icon:hover path {
  fill: #007bff;
}

方案二：使用<object>标签嵌入SVG #

<object>会把SVG作为当前文档的子文档加载，外部CSS可以通过SVG内部定义的类控制样式，也支持SVG内部的样式表。

示例：

<object data="your-icon.svg" type="image/svg+xml" class="icon" aria-hidden="true"></object>

需要在SVG文件里给目标元素添加类名：

<!-- your-icon.svg -->
<svg viewBox="0 0 24 24">
  <path class="icon-path" d="M12 2C6.48 2 ..."/>
</svg>

然后外部CSS可以这样写：

.icon:hover .icon-path {
  fill: #007bff;
}

注意：如果SVG来自跨域地址，这种方法可能因浏览器安全限制失效。

方案三：使用SVG Sprite（多图标场景） #

如果页面中有多个重复使用的SVG图标，用Sprite更高效。把所有SVG图标定义在一个<defs>里，通过<use>标签引用，同样支持CSS控制悬停效果。

示例：

<!-- 隐藏的SVG Sprite容器 -->
<svg style="display: none;">
  <defs>
    <symbol id="heart-icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 ..."/>
    </symbol>
  </defs>
</svg>

<!-- 引用图标 -->
<svg class="icon" aria-hidden="true">
  <use href="#heart-icon"/>
</svg>

CSS和内联SVG的写法一致：

.icon:hover path {
  fill: #007bff;
}

语义化注意事项 #

• 如果图标是纯装饰性的，添加aria-hidden="true"，避免屏幕阅读器读取无意义内容。
• 如果图标有实际功能（比如搜索按钮里的放大镜），需要添加aria-label或者配合相邻的可见文本，保证可访问性：

<button>
  <svg class="icon" aria-label="搜索"></svg>
  <span>搜索</span>
</button>

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