Определить все элементы SVG по определенной координате (щелчок мышью)

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

Всего 2 ответа


  1. Вызовите document.elementFromPoint - это скажет вам самый передний элемент под мышью
  2. Если какой-либо элемент найден на шаге 1, установите для этого элемента значение указателя-события: нет и вернитесь к шагу 1.
  3. Если не выйти, вы найдете все элементы в цикле выше. Не забудьте удалить свойство указателя-событий, которое вы установили для всех найденных элементов, иначе вы не найдете их в следующий раз.

Возможно, самое простое решение - использовать document.elementsFromPoint() :

Свойство elementsFromPoint() интерфейса DocumentOrShadowRoot возвращает массив всех элементов в указанных координатах (относительно области просмотра).

Совместимость браузера хорошая, и он даст вам все элементы за один вызов.


Есть идеи?

10000