javascript - SVG 标题工具提示未显示在文本元素上

Question

我需要在鼠标悬停在 SVG 文本元素上时显示工具提示。我在网上找到的所有内容都表明要添加 Title 元素作为 SVG 元素的第一个子元素。它可以在 Chrome 中运行，但不能在我的用户群的主要浏览器 Safari 中运行。

这是显示我的情况的简化示例。



是一个 FontAwesome 灯泡图标，我希望用户将鼠标悬停在该元素上并显示工具提示。

<svg ...><text><title>some text</title>&#xf0eb;</text></svg>

想法？

Answer 1

我在 Safari 12.1 中测试了以下代码片段，工具顶部“一些文本”按预期显示。也许您正在使用旧版本的 Safari 进行测试，或者您正在使用影响此功能的插件？

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<svg width="50" height="50">
  <text x="10" y="20" class="fas">
    <title>some text</title>
    &#xf0eb;
  </text>
</svg>