在许多浏览器中,将鼠标指针悬停在带有嵌套 <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>
最佳答案
我发现了一种有效的方法:将一些
或
放入标题文本中。这些是零宽度的不可见字符。这些的不同组合使标题看起来与 Chromium 不同。
关于google-chrome - Chromium SVG 悬停 <title> 工具提示奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12760886/