html - 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 属性。

title的使用W3C spec 中不鼓励属性 .它甚至带有警告。

Warning!

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

---

然而，如this answer中所述通过 Phrogz , SVG 实际上有一个元素。

MDN : SVG <title>元素

Each container element or graphics element in an SVG drawing can supply a title description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, title element is not rendered as part of the graphics. However, some user agents may, for example, display the title element as a tooltip. Alternate presentations are possible, both visual and aural, which display the title element but do not display path elements or other graphics elements. The title element generally improve accessibility of SVG documents

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>