鼠标悬停时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

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

警告!

目前不鼓励依赖title属性,因为许多用户代理不以本规范要求的可访问方式公开属性(例如,需要诸如鼠标之类的指针设备来显示工具提示,这不包括仅限键盘的用户和仅限触摸的用户,例如任何拥有现代手机或平板电脑的用户.

然而,在提到这个答案由Phrogz,SVG实际上有一个元素.

MDN:SVG<title>元素

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

W3C SVG Spec <desc>&<title>elements

<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>