title属性在内联SVG中无效，因它属HTML全局属性，不触发悬停提示或屏幕阅读器朗读；正确做法是用SVG内部<title>元素作语义化标签，并配合CSS:hover实现视觉反馈。
title 属性对内联 SVG 的 <svg> 根元素或其子元素（如 <circle>、<path>）加了也没用——它不会触发悬停提示，也不会被屏幕阅读器当作可访问性标签读出。
为什么 title 属性在内联 SVG 里不生效
内联 SVG 中的 title 是一个 HTML 全局属性，但它和 SVG 内部的 <title> 元素完全不是一回事。浏览器把 HTML 的 title 当作“建议性提示”，只对普通 HTML 元素（如 <img>、<p>）起作用；而 SVG 图形本身不响应这个属性，哪怕你写成 <circle title="删除">，鼠标悬停也不会弹出提示。
- SVG 子元素（
<path>、<rect>等）不继承 HTML 全局title的行为 - 即使父级
<svg>加了title，也仅可能在极少数旧浏览器中触发一次整体提示，且不可控、不语义、不支持键盘焦点 - 该属性与 SVG 可访问性标准（
<title>+<desc>）无任何关系
真正有效的 SVG 悬停提示：CSS :hover + pointer-events
要让 SVG 图形区域响应悬停并给出视觉反馈（比如变色、缩放、显示文字），必须用 CSS 控制其自身样式，而不是依赖 title。关键点在于确保事件能穿透到目标元素：
- 默认情况下，SVG 中的
<g>或透明区域可能不响应:hover，需显式设置pointer-events: all; - 对图形元素直接写
circle:hover { fill: #007bff; }是最直接的方式 - 若想在悬停时显示文字提示，可用
::after伪元素 +position: absolute定位，但需确保父容器有position: relative且 SVG 不设overflow: hidden - 避免给
<svg>设pointer-events: none—— 这会彻底禁用所有交互
需要语义化提示？必须用 SVG 内部 <title> 元素
如果目标是让屏幕阅读器正确朗读图标含义（例如“关闭按钮”），唯一合规做法是把 <title> 和 <desc> 作为 <svg> 的**直接子元素**，且放在所有图形之前：
立即学习“前端免费学习笔记（深入）”；
<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 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> </svg>
-
<title>必须是<svg>的第一级子节点，嵌套在<g>里无效 - 不能靠 JS 动态插入
<title>—— 屏幕阅读器只读取初始 DOM 结构 - 配合
aria-hidden="false"和focusable="false"才能确保被识别又不干扰键盘导航
移动端和键盘用户的实际盲区
所有基于 :hover 的 CSS 提示在纯触摸设备上默认不触发，title 属性在 iOS Safari 和 Android Chrome 上基本无效。这意味着：
- 仅靠
:hover做提示 = 放弃触摸用户和键盘用户 - 真正的可访问提示必须同时满足：视觉反馈（CSS）、语义标注（
<title>）、键盘可聚焦（如加tabindex="0"） - 如果 SVG 是操作控件（如“删除”图标），务必包裹在
<button>里，而非仅靠悬停提示
最容易被忽略的是：很多人写了 <title> 却忘了删掉导出工具自动加的 title 属性，导致 HTML 属性和 SVG 元素同名冲突，部分解析器会静默忽略内部 <title>。
