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

Question

我有一个SVG，它有几个描述区域的路径，如下所示：

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

我想要显示一个div，path是基于它而悬浮的。为了能够在css中这样做，我尝试将相应的div放在路径中：

path:hover div.infobox
{
    display: block
}

div.infobox
{
    display: none
    position: absolute
}

但这不起作用，因为如果我在SVG中隐藏非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();
});

Answer 2

如果一个简单的标题工具提示就可以了，那么您可以使用SVG的title元素(与HTML属性相同)：

<svg>
  <g>
    <path d="..."><title>text 1</tile></path>
    <path d="..."><title>text 2</tile></path>
    <path d="..."><title>text 3</tile></path>
  </g>
</svg>

您还可以使用SVG文本：

<svg>
  <style type="text/css">
    text {display:none}
    svg > g > g:hover text {display:inline}
  </style>
  <g>
    <g>
      <path d="..."/>
      <text>text 1</text>
    </g>
    <g>
      <path d="..."/>
      <text>text 2</text>
    </g>
    <g>
      <path d="..."/>
      <text>text 3</text>
    </g>
  </g>
</svg>

当然，您必须正确地定位文本，并可能添加一个背景，或者使用this anwer中描述的过滤器，或者使用rect。