SVG元素加title属性无悬停提示，因SVG的<title>是可访问性标签，仅在聚焦或读屏时生效，不触发浏览器原生tooltip；HTML全局title属性对SVG无效，需用ARIA+CSS自定义实现。
SVG元素加title属性为什么没提示？
因为 SVG 内部的 <title> 是规范定义的**可访问性标签**，不是 HTML 全局 title 属性；它只在图形被聚焦或读屏软件读取时生效，**不会触发浏览器原生悬停 tooltip**。你在 <svg> 标签上写 title="说明" 也无效——SVG 元素不继承 HTML 全局属性的悬停行为。
HTML title属性对SVG容器无效的三个原因
即使把 title 加在包裹 SVG 的 <div> 或 <button> 上，提示仍可能不出现：
- 父级设置了
pointer-events: none（常见于图标按钮封装层） - SVG 容器用了
display: inline-block但未设position: relative，导致悬停区域与视觉位置错位 - SVG 内部有
<g>或<path>捕获了鼠标事件，实际悬停落在子元素上，而子元素没带title
想让SVG图形有悬停提示，必须用SVG原生title元素
正确做法是把 <title> 放进 SVG 内部，作为第一个子元素：
<svg viewBox="0 0 24 24"> <title>下载文件</title> <path d="M..." /> </svg>
但注意：
- 这个 <title> 只在 SVG 被键盘聚焦（Tab 进入）或屏幕阅读器读取时播报
- 桌面端 Chrome/Firefox **仍不显示悬停气泡**，仅 Safari 在部分场景下会渲染（不稳定）
- 它不支持换行、样式、延迟控制，也不能通过 CSS 选中
真正可靠的 SVG 悬停提示只能靠自定义实现
放弃依赖原生机制，用 ARIA + CSS 定位才是跨浏览器、可访问、可控的解法：
立即学习“前端免费学习笔记（深入）”；
- 给 SVG 外层容器加
aria-describedby="tooltip-id" - 对应
<div id="tooltip-id" role="tooltip">，用position: absolute定位在 SVG 右侧或下方 - 触发逻辑用
:hover+:focus-within，避免只响应鼠标 - 隐藏提示时用
visibility: hidden; opacity: 0; pointer-events: none，别用display: none
SVG 的悬停提示从来不是“加个属性就能好”的事——它的语义层和渲染层分离得比普通 HTML 元素更彻底，强行套用 title 只会让问题藏得更深。
