javascript - 如何在 HTML 中创建一个信息框来显示与悬停的 SVG 路径相关的信息？

Question

我有一个 SVG，其中包含一些描述区域的路径，如下所示:

<svg>
    <g>
        <path d="..."></path>
        <path d="..."></path>
        <path d="..."></path>
    </g>
</svg>

而且我想显示一个 div 基于哪个 path 悬停。我尝试将相应的 div 放在路径中，以便能够在 css 中执行此操作:

path:hover div.infobox
{
    display: block
}

div.infobox
{
    display: none
    position: absolute
}

但这不起作用，因为如果我在其中隐藏非 SVG 元素，SVG 将无法正确呈现。

有没有一种简单的方法可以通过 CSS 或 jQuery 来做到这一点？

Answer 1

在 jQuery 中它应该只是...

$("path").on("hover", function() {
    $(".infobox").toggle();
});

只需在页面某处(svg 之外)创建具有绝对位置的 div。

如果您需要为特定的 SVG 执行此操作，则可能会更好

$("#svg-id").find("path").on("hover", function() {
    $(".infobox").toggle();
});

更新相关路径/div

SVG:

<path id="infobox1">...</path>
<path id="infobox2">...</path>
...

HTML:

<div class="infobox infobox1">...</div>
<div class="infobox infobox2">...</div>
...

Javascript:

$("#svg-id").find("path").on("hover", function() {
    //hide all info boxes
    $(".infobox").hide();
    //show the right one based on id - class relation
    $("."+$(this).attr('id')).show();
});