Javascript 如何瞄准a<；路径>；在a<；svg>；使用Vue.js@mouseover？

我有一个SVG地图，其中有各种保存数据的路径。我想做的是在路径悬停时提取状态名

我在svg元素上附加了一个事件监听器，正在查找event.target以从事件中获取特定路径。我构建了handleStateHover，它将当前event.target记录在methods对象中：

<svg style="stroke-linejoin: round; stroke:#000; fill: none;"
     width="100%"
     height="600"
     viewBox="0 0 1000 600"
     version="1.1"
     id="svg"
     @click="handleStateClick"
     @mouseover="handleStateHover">

handleStateHover (e) {
    console.log(e.target) 
} 

扶手式悬停（e）{
console.log（例如target）
} 

问题是，似乎e.target记录的是svg元素而不是path元素。有时它确实会按预期显示path元素，但随后会再次快速更改为svg元素

您可以通过打开控制台并查看JS日志来查看

---

有人知道如何一致地获取悬停事件上的path元素吗？e.target不应该总是显示悬停在父元素上的特定子元素吗？我做错了什么？谢谢

这不完全是一个vue问题，而只是一个普通的问题

然而，需要做两件事：

筛选以仅使用

path

s，然后从路径的

dataset

handlestate悬停（e）{
如果（e.target.tagName=='path'）{
log（e.target.dataset.name）；
}
}

添加

指针事件：填充svg样式

默认情况下，鼠标指针使用方框模型，因此您的事件无法正确区分不同的状态

---

下面是一个工作示例：

这不完全是一个vue问题，而只是一个普通的js

然而，需要做两件事：

筛选以仅使用

path

s，然后从路径的

dataset

handlestate悬停（e）{
如果（e.target.tagName=='path'）{
log（e.target.dataset.name）；
}
}

添加

指针事件：填充svg样式

默认情况下，鼠标指针使用方框模型，因此您的事件无法正确区分不同的状态

---

下面是一个工作示例：

非常感谢，这解决了我的问题。非常感谢，这解决了我的问题。