如何在SVG图形中添加工具提示？

一尘不染

如何在SVG图形中添加工具提示？

javascript

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，该消息应被用作背景的框包围。它们应彼此完全对齐，并与矩形（顶部和中心）完全对齐。做这个的最好方式是什么？

我尝试使用“ x”，“ y”，“ width”和“ height”属性添加svg文本，然后在svg
rect之前添加。问题是文本的参考点在中间（因为我想使它居中对齐text-anchor: middle），但是对于矩形，它是左上角的坐标，而且我想在文本周围留一点空白，这使它有点痛苦。

另一个选择是使用html div，这会很好，因为我可以直接添加文本和填充，但是我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？

阅读 608

2020-05-01

共1个答案

一尘不染

您是否可以仅使用SVG <title>元素及其传达的默认浏览器渲染？（注：这是不一样的title，你可以上使用属性DIV / IMG /跨度在HTML，它需要一个子元素命名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来打开和关闭显示。如上所示，使标签出现在正确位置的一种方法是将rect和HTML包裹在相同的位置，从而将它们定位在一起。

要使用JS查找SVG元素在屏幕上的位置，可以使用getBoundingClientRect()，

2020-05-01