内联 svg 中 title 属性无效，须用 元素（svg 直接子元素）配合 aria-hidden="false" 和 focusable="false" 实现可访问提示，并通过 :hover + pointer-events 实现视觉反馈。
内联 SVG 中的 title 属性完全无效，不是兼容性问题，而是规范层面不支持——它既不会触发悬停提示，也不会被屏幕阅读器读出。真正可用的交互提示方案只有两条路：语义化用 SVG 内部的 <title></title> 元素，视觉反馈靠 :hover + pointer-events。
为什么 title 属性在 <circle></circle> 或 <path></path> 上不起作用
HTML 的 title 是全局属性，只对可聚焦的 HTML 元素（如 <img>、<button></button>）生效；SVG 图形元素属于 SVG 命名空间，不继承该行为。即使写成 <circle title="删除"></circle>，鼠标悬停毫无反应，JS 也读不到这个值作为 tooltip 数据源。
常见错误现象包括：
- 开发者加了
title却发现所有现代浏览器都不显示提示 - 把
<title></title>写在<g></g>里，导致屏幕阅读器跳过不读 - 给
<svg></svg>设置pointer-events: none后又试图用 CSS:hover，结果事件彻底失效
用 <title></title> 和 <desc></desc> 实现可访问提示
真正能被屏幕阅读器识别的是 SVG 内部的 <title></title> 元素，但必须满足三个硬性条件：
-
<title></title>必须是<svg></svg>的**直接子元素**，嵌套在<g></g>或<defs></defs>里无效 - 必须配合
aria-hidden="false"和focusable="false"才能被读出又不干扰键盘导航 -
<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
关键 CSS 示例：
svg .icon:hover path {
fill: #007bff;
}
svg .icon g {
pointer-events: all;
}
内联 SVG 是唯一能同时支持可访问性和交互的方案
用 <img src="icon.svg"> 引入 SVG，DOM 里只有 <img> 节点，内部 <path></path> 不可见，CSS 和 JS 都无法操作；<object></object> 和 <iframe></iframe> 存在 DOM 隔离，跨域受限，也无法直接继承父级样式。只有内联 SVG 才能让 <title></title> 生效、:hover 可控、fill="currentColor" 统一配色——但必须带 viewBox，否则缩放会失真。
最容易被忽略的一点：动态插入 <title></title>（比如用 JS 创建后 append 到 <svg></svg>）不会被屏幕阅读器识别，它只读取初始 DOM 结构。所以 <title></title> 必须在 HTML 加载时就存在，且位置严格限定为 <svg></svg> 的第一级子节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
