我有一系列 svg 矩形(使用 D3.js)，我想在鼠标悬停时显示一条消息，消息应该被一个充当背景的框包围。它们应该彼此完美对齐，并与矩形(在顶部和居中)对齐。执行此操作的最佳方法是什么？
我尝试使用“x”、“y”、“width”和“height”属性添加一个 svg 文本，然后添加一个 svg 矩形。问题是文本的引用点在中间(因为我希望它居中对齐，所以我使用了 text-anchor: middle)，但是对于矩形来说，它是左上角的坐标，另外我想要文本周围有一点边距，这让人有点痛苦。
另一种选择是使用 html div，这很好，因为我可以直接添加文本和填充，但我不知道如何获取每个矩形的绝对坐标。有办法做到这一点吗？
最佳答案
你能简单地使用 SVG <title> element 和它传达的默认浏览器渲染吗？ (注意:这与您可以在 html 中的 div/img/spans 上使用的 title 属性不相同，它需要是一个名为 title 的子元素)
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>或者，如果您真的想在 SVG 中显示 HTML，您可以直接嵌入 HTML:
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>...但是您需要 JS 来打开和关闭显示。如上所示，使标 checkout 现在正确位置的一种方法是将 rect 和 HTML 包装在相同的 <g> 中，将它们放在一起。
要使用 JS 查找 SVG 元素在屏幕上的位置，您可以使用 getBoundingClientRect() ，例如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
关于javascript - 如何向 svg 图形添加工具提示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10643426/