SVG内联元素加title属性无效，因title是HTML全局属性，SVG图形元素（如<circle>、<path>）不响应它，浏览器既不渲染提示框也不被屏幕阅读器识别。
SVG内联元素加title属性为什么没反应
因为title是HTML全局属性，而SVG子元素（如<circle>、<path>）根本不响应它——浏览器不会为这些元素渲染原生提示框，也不会被屏幕阅读器识别。你写<circle title="删除">，悬停后什么都不会出现，这不是bug，是规范行为。
常见误判点：
• 父级<svg>加了title，但只可能在极个别旧浏览器中触发一次整体提示，不可控、不语义
• 把<title>塞进<g>里，无效；它必须是<svg>的**第一级子元素**
• 用JS动态插入<title>，屏幕阅读器读不到——只认初始DOM结构
用CSS:hover实现视觉反馈的关键配置
想让SVG图形悬停变色、缩放或显示文字，必须走CSS路径，但默认行为常失效：
-
pointer-events: all要显式设在目标元素上（比如<circle>），否则透明区域或<g>组不响应:hover - 避免给
<svg>设pointer-events: none——这会彻底禁用所有交互 - 若用
::after伪元素显示文字提示，父容器<svg>或其直接包裹层必须有position: relative，否则提示会相对body定位 - 如果父容器用了
transform或will-change，会创建新层叠上下文，z-index对伪元素失效，得加isolation: isolate或提升父级层级
真正合规的可访问性提示怎么写
让屏幕阅读器正确朗读图标含义，唯一标准做法是组合使用SVG内部<title>和<desc>：
立即学习“前端免费学习笔记（深入）”；
• <title>必须是<svg>的**直接子节点**，且放在所有图形元素之前
• 必须配aria-hidden="false"和focusable="false"，否则读屏软件可能跳过或干扰键盘导航
• 不要用aria-label覆盖——它对SVG图形元素支持不稳定，且无法与<desc>形成语义链
示例结构：
<svg viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <title>关闭</title> <desc>点击关闭当前面板</desc> <path d="M19 6.41L17.59 5..." /> </svg>
移动端和键盘用户的实际盲区
原生title在iOS Safari和多数Android WebView中完全不触发——触控无hover状态，长按唤起的是系统菜单，不是提示框。键盘用户也无法通过Tab聚焦后看到提示。
降级设计必须直面这点：
• 移动端需监听touchstart + setTimeout模拟长按（建议600ms阈值），并加防抖避免误触
• 键盘用户需要tabindex="0" + role="button" + aria-label组合，才能让焦点进入时朗读提示
• 所有自定义提示DOM必须挂载到document.body下，不能嵌在局部组件里，否则可能被overflow: hidden裁掉
最容易被忽略的是：无论用哪种方案，title都不该是唯一信息通道——它既不参与语义结构，也不能被复制、翻译或搜索。
