SVG内联是悬停变色前提，<img>或background-image引用的SVG无法通过CSS控制<path>颜色；必须内联SVG代码、清除所有fill/stroke属性、用fill="currentColor"并由父容器color控制变色。
SVG内联写法是悬停变色的前提
外部引用的 <img> 或 CSS background-image 中的 SVG 无法通过 CSS 选择器控制内部 <path> 颜色，必须把 SVG 代码直接写进 HTML（即内联 SVG）。否则所有悬停逻辑都会失效。
- 错误做法：
<img src="icon.svg">—— 此时 SVG 是独立资源，DOM 中不可见子元素 - 正确做法：复制 SVG 源码，粘贴到 HTML 中，包裹在
<svg>标签里 - 注意移除 SVG 文件头部的
<?xml ...?>和<!DOCTYPE ...>，只保留<svg>及其子节点
用 fillcurrentColor 实现主题色联动
直接给 <path> 写死 fill="#333" 会导致悬停时颜色切换僵硬，且难与文字色同步。推荐用 fill="currentColor"，让 SVG 颜色跟随父级文本色变化。
- HTML 结构示例：
<span class="icon-wrapper"><svg><path fill="currentColor" d="..." /></svg></span> - CSS 控制：
.icon-wrapper { color: #007bff; } .icon-wrapper:hover { color: #dc3545; } - 这样既避免重复写 fill 值，又天然支持深色模式下通过
color-scheme或prefers-color-scheme响应
:hover 作用域要包住整个 SVG 容器
如果只对 <svg> 标签加 :hover，而它没有显式宽高或 display 设置，鼠标可能悬停不到——尤其当 SVG 内容为空白或尺寸为 0 时。
- 必须给外层容器（如
<span>、<button>或带 class 的<div>）设置可交互区域 - 推荐加
display: inline-flex或display: inline-block，并设cursor: pointer - 若 SVG 本身有
width/height属性，也要确保其父容器不 collapse（比如父级没内容且没设 min-width）
IE11 不支持 currentColor 在 SVG 中继承
如果项目仍需兼容 IE11，fill="currentColor" 对 SVG 子元素无效，会回退成黑色。此时得用 CSS 自定义属性 + fill 绑定，或 JS 动态改 fill 属性。
立即学习“前端免费学习笔记（深入）”；
- 兼容方案（CSS）：
.icon-wrapper { --icon-color: #007bff; } .icon-wrapper svg path { fill: var(--icon-color); } .icon-wrapper:hover { --icon-color: #dc3545; } - 注意：IE11 不支持 CSS 变量，所以该方案实际也失效——真要支持 IE11，只能用 JS 监听 mouseenter/mouseleave 并手动 setAttribute("fill", ...)
- 现代项目建议直接放弃 IE11，用
currentColor简洁可靠
真正卡住人的往往不是怎么写 hover，而是 SVG 没内联、父容器没尺寸、或者误以为 <use> 引用也能被 CSS 控制——这些地方一错，整个高亮逻辑就静默失效。
