title属性在svg元素上完全无效，因svg元素不继承html的title交互机制；需用和元素配合aria-hidden、focusable实现可访问性，或用css:hover+pointer-events实现悬停反馈。
title 属性对 SVG 元素完全无效，不是兼容性问题，而是规范层面不支持——加了也不会弹出悬停提示，也不能被屏幕阅读器读取。
为什么 title 属性在 <svg></svg> 和子元素上都不起作用
SVG 图形元素（如 <circle></circle>、<path></path>）属于 SVG 命名空间，不继承 HTML 全局属性的交互行为。title 是 HTML 层的提示机制，只对可聚焦/有语义的 HTML 元素（如 <img>、<input>）生效。你在 <svg></svg> 标签上写 title="下载"，或给 <path></path> 加 title="删除"，浏览器根本不会解析为悬停触发源。
常见错误现象：
- 开发者反复测试鼠标悬停，但气泡始终不出现，误以为是 CSS 冲突或 z-index 问题
- 用 JS 读取
element.title得到空值或undefined，才发现该属性压根没被挂载 - 把
<title></title>元素写进<g></g>里，结果屏幕阅读器完全跳过不读
用 <title></title> + <desc></desc> 实现可访问性语义（不是悬停提示）
真正能被屏幕阅读器识别的是 SVG 内部的 <title></title> 元素，但它只在键盘聚焦或读屏时播报，**不触发任何视觉提示**。必须满足三个硬性条件才能生效：
-
<title></title>必须是<svg></svg>的直接子元素，不能嵌套在<g></g>、<defs></defs>或其他容器内 - 需显式设置
aria-hidden="false"和focusable="false"，否则可能被跳过或干扰 Tab 导航 -
<desc></desc>应紧随<title></title>后，提供操作后果等补充信息，比如“点击关闭当前面板”
示例结构（有效）：
<svg viewbox="0 0 24 24" aria-hidden="false" focusable="false"><title>关闭</title> <desc>点击关闭当前面板</desc><path d="M19 6.41L17.59 5 12 10.59"></path></svg>
用 :hover + pointer-events 实现视觉悬停反馈
想让 SVG 图形响应鼠标悬停并变色、缩放或显示文字，必须走 CSS 路线，关键在于事件穿透：
- 默认情况下，
<g></g>容器或透明区域可能不响应:hover，需显式设pointer-events: all - 对图形元素直接写
circle:hover { fill: #007bff; }最可靠，避免依赖父级<svg></svg>的 hover - 若需悬停时显示文字提示，可用
::after伪元素 +position: absolute，但父容器必须有position: relative，且<svg></svg>不能设overflow: hidden - 绝对禁止给
<svg></svg>设pointer-events: none—— 这会彻底禁用所有交互
关键 CSS 示例：
svg .icon-button {
pointer-events: all;
}
svg .icon-button:hover {
transform: scale(1.1);
}
svg .icon-button:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
移动端和键盘用户的实际盲区
桌面端 Chrome/Firefox 对 SVG 内部 <title></title> 不渲染悬停气泡，Safari 表现不稳定；iOS Safari 基本不响应任何 title 相关提示，Android 浏览器也普遍忽略。更关键的是：键盘用户 Tab 进入 SVG 图标后，title 不会自动朗读，除非你同时设置了 role="button" 和 tabindex="0"，并配 aria-label。
最容易被忽略的一点：无论用哪种方案，title 都不该是唯一信息通道。如果提示内容含操作后果（如“将永久删除”）、格式要求或关键步骤，必须把它放进页面可见文本、aria-describedby 关联的元素，或自定义 tooltip 的 DOM 中——不能只靠一个不可控的属性兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
