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

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

我尝试使用“ x”,“ y”,“ width”和“ height”属性添加svg文本,然后在svg

rect之前添加。问题是文本的参考点在中间(因为我想使它居中对齐text-anchor:

middle),但是对于矩形,它是左上角的坐标,而且我想在文本周围留一点空白,这使它有点痛苦。

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

回答:

您是否可以仅使用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(),

以上是 如何在SVG图形中添加工具提示? 的全部内容, 来源链接: utcz.com/qa/415269.html

回到顶部