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

Posted 2023-02-22

【中文标题】SVG 矩形在鼠标悬停时显示 HTML 标题

【英文标题】：SVG Rectangle display HTML title on mouseover

【发布时间】：2016-03-28 23:23:07

【问题描述】：

我尝试在鼠标悬停矩形时显示工具提示。我的尝试是使用<g> 并为其设置title 并将title 设置为<rect> 本身，但不会产生任何可见的输出（在 Chrome 上）。

HTML

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

JSFiddle

观察

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

谁能指出我正确的方向？

【问题讨论】：

在 Firefox 42 中为我工作

你完全正确@JacobGray，我没有在FF上尝试过。似乎是 Chrome 问题（当前使用的是 Chrome 47.0）。

我已经为 Firefox 提出了bug 1235066。 SVG 元素应该只将标题子元素显示为工具提示。它们不像 html 那样使用标题属性。

【参考方案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  >
  <g>
    <title>blue rectangle</title>
    <rect   fill="blue" x="10px" y="10px"></rect>

  </g>
  <rect   fill="red" x="60px" y="60px" title="red rectangle"></rect>
</svg>

【讨论】：

好的，那么我们应该理解 Firefox 的行为与 HTML 和 SVG 元素一致，这是不正确的吗？顺便感谢您的意见。

如果 FF 在 SVG 元素上显示标题属性，那么这样做是错误的。工具提示应该来自一个标题子元素。我看看能不能解决。

不知道标题 attribute 是否会在 FF 中为 SVG 显示（我还没有检查过……目前无法测试。）

@Zeratops 我已经为 Firefox 提出了bug 1235066。 SVG 元素应该只将标题子元素显示为工具提示。它们不像 html 那样使用标题属性

虽然这确实是最好的方法，但当您使用 显示 rect 元素时，这些工具提示似乎永远不会显示。

【参考方案2】：

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

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

【讨论】：

非常感谢您的关注以及您抽出宝贵时间解决此问题。