SVG 矩形在鼠标悬停时显示 HTML 标题

Question

我尝试在鼠标悬停矩形时显示工具提示。 我尝试使用<g>和一组title到它并设置一个title到<rect>本身，但不产生任何可见的输出（在Chrome）。

HTML

<svg width="200px" height="200px">
  <g title="blue rectangle">
    <rect width="50px" height="50px" fill="blue" x="10px" y="10px"></rect>
  </g>
  <rect width="50px" height="50px" fill="red" x="60px" y="60px" title="red rectangle"></rect>
</svg>

JSFiddle

观察

感谢@Jacob Gray 的评论，问题仍然存在于 Chrome 上（FireFox 行为正确）。

谁能指出我正确的方向？

Answer 1

有两种方法：使用推荐的<title></title>元素和不推荐的title属性。

W3C 规范中不鼓励使用title属性。 它甚至带有警告。

警告！

目前不鼓励依赖 title 属性，因为许多用户代理并没有按照本规范的要求以可访问的方式公开该属性（例如，需要鼠标等指示设备来导致出现工具提示，这排除了仅使用键盘的用户和仅触摸用户，例如任何拥有现代手机或平板电脑的人）。

---

然而，正如Phrogz在这个答案中提到的，SVG 实际上有一个元素。

MDN : SVG <title>元素

SVG 绘图中的每个容器元素或图形元素都可以提供一个标题描述字符串，其中描述是纯文本的。 当前 SVG 文档片段在可视媒体上呈现为 SVG 时，标题元素不会呈现为图形的一部分。 然而，一些用户代理可能，例如，将标题元素显示为工具提示。 可以使用视觉和听觉的替代演示，它们显示标题元素但不显示路径元素或其他图形元素。 title 元素普遍提高了 SVG 文档的可访问性

W3C SVG 规范<desc>和<title>元素

 <svg width="200px" height="200px"> <g> <title>blue rectangle</title> <rect width="50px" height="50px" fill="blue" x="10px" y="10px"></rect> </g> <rect width="50px" height="50px" fill="red" x="60px" y="60px" title="red rectangle"></rect> </svg>

Answer 2

从版本 46开始，我已经修复了 Firefox 中 SVG 元素标题属性的错误显示。

Chrome 和 Firefox 现在的行为相同，它们都需要子<title>元素用于 SVG 工具提示。 请注意，那里没有变化，现在两个 UA 在许多版本中都以这种方式工作。