Question

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

我有一张英国地图，SVG路径如下：路径类=＆＃34;苏格兰＆＃34;填充=＆＃34;＃CCCCCC＆＃34; d =＆＃34; M262.384,105.372c-0.304 ....等等......

我已经给了每个ID，你可以在苏格兰的片段中看到。我想要的只是找出鼠标在哪条路径（或英国的一部分）。我确信这可以通过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)
  });
}

使用Javascript从SVG图像获取路径

1 个答案: