google-chrome - Chromium SVG 悬停 <title> 工具提示奇怪

Question

在许多浏览器中，将鼠标指针悬停在带有嵌套 <title> 的 SVG 对象上标题文本显示为工具提示。我发现如果相邻的对象具有相同的标题，Chrome 中会发生一些奇怪的事情:当您将鼠标从一个对象悬停到另一个对象时，工具提示不会重新显示。

这可以用下面的代码/fiddle 来复制。在 IE 中，您会得到每个对象的全新工具提示。

我该如何解决这个问题？我需要使用 Chromium，我需要相同的工具提示重新出现在相邻的对象上。我真的不想进入(更多)脚本编写，除非它可以在超轻量级、可靠且完美的 SVG 中完成。

也许我可以在标题文本中嵌入一些不可见的东西，让 Chromium 认为每个对象的标题都不同？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="100" height="100" fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="100" y="0" width="100" height="100" fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="0" y="100" width="100" height="100" fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="100" y="100" width="100" height="100" fill="yellow" stroke="black">
    <title>SQUARE</title>
</rect>
</svg>

http://jsfiddle.net/CvZfR/

Answer 1

我发现了一种有效的方法:将一些 ‌ 或 ‍ 放入标题文本中。这些是零宽度的不可见字符。这些的不同组合使标题看起来与 Chromium 不同。