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

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

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

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

---

有没有一种简单的方法可以通过CSS或jQuery实现这一点？

在jQuery中，它应该是

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

只需在页面的某个位置（svg之外）创建具有绝对位置的div

如果您需要为特定的SVG执行此操作，那么最好这样做

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

相关路径/分区的更新

SVG：

---

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

文本1
文本2
文本3

您还可以使用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>

文本{显示：无}
svg>g>g:悬停文本{显示：内联}
文本1
文本2
文本3

---

当然，您必须正确定位文本，并可能添加背景，如中所述，使用过滤器或矩形。

问题是，我需要选择相应的div，我有20个区域和20个div。有没有比用一个公共类手动标记所有区域及其div更好的方法？不确定您到底想做什么，但可以按类或索引来做。上面添加了一个示例，使用class/id作为相互引用。这个解决方案很好，我喜欢。

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

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

$("#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();
});

<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>
  <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>