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

警告！

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

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

MDN：SVG <title>元素

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

W3C SVG Spec <desc>＆amp; <title>元素

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我已经修复了Firefox from version 46之后SVG元素的title属性的错误显示。

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

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

2 个答案: