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>