使用 Javascript 从 SVG 图像中获取路径

Question

我正在尝试找出如何使用 Javascript 判断鼠标在 SVG 图像中所在的路径，以便对其执行操作。

我有一张英国地图，SVG 路径如下所示： path class="Scotland" fill="#CCCCCC" d="M262.384,105.372c-0.304....等等等等...

我已经给了每个人一个 ID，正如你在苏格兰的那个 sn-p 中看到的那样。我只想找出鼠标在哪条路径（或英国的一部分）上。我确信这可以通过 Javascript 实现，但我尝试过的任何方法都不起作用，这一定是我想念的一些简单的东西，尽管我一直在寻找几个小时但还没有任何运气。过去我用 html 表做过类似的事情，但我似乎无法用这些 SVG 路径做到这一点！

任何指针将不胜感激。 戴夫

Answer 1

更适合您的问题的搜索词是“svg hover js”。有了这个我找到了Mouseover on SVG circles

您的案例的主要区别在于您将通过自动迭代将侦听器附加到每个路径：

var shapes = document.getElementsByTagName('circle')
for (var i = 0; i < shapes.length; i++) { 
  var shape = shapes[i]
  shape.addEventListener('mouseover', function(e) {
    console.log('hover', e.currentTarget.attributes.id)
  });
}