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 spec 中使用title 属性。它甚至带有警告。

警告！

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

---

然而，正如Phrogz 在this answer 中提到的那样，SVG 实际上有一个元素。

MDN: SVG <title> 元素

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

W3C SVG Spec<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

我已修复 Firefox from version 46 及以上版本中 SVG 元素的 title 属性显示错误。

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