Как нацелиться на <path>в пределах <svg>с помощью Vue.js @mouseover?

Question

Codepen с примером.

У меня есть карта SVG с различными путями, которые содержат данные. То, что я хотел бы сделать, это подобрать название штата, когда путь наведен.

Я прикрепил слушатель события к элементу svg и ищу event.target, чтобы получить конкретный путь от события. Я построил handleStateHover, который регистрирует текущий event.target в объекте методов:

<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.target, похоже, регистрирует элемент svg вместо элементов path. Иногда он показывает элемент path, как задумано, но затем быстро снова изменяется на элемент svg.

Это можно увидеть, открыв консоль и просмотрев журнал JS.

Кто-нибудь знает, как последовательно получить элемент path для события hover? Разве e.target не должен всегда показывать определенный дочерний элемент, который был наведен на родительский элемент? Что я делаю неправильно? Спасибо

Answer 1

Это не совсем проблема, а скорее просто ваниль.

Тем не менее, необходимы две вещи:

1. фильтр использовать только path с, а затем получить имя из пути dataset

handleStateHover (e) { if (e.target.tagName === 'path') { console.log(e.target.dataset.name); } }

2. добавить стиль pointer-events: fill; в svg
   По умолчанию указатель мыши использует блочную модель, поэтому ваши события не будут правильно различаться между состояниями

Вот рабочий пример: https://codepen.io/anon/pen/JeGELr