SVG-элемент, перекрывающий предыдущие SVG-элементы

Question

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

Answer 1

Вы можете отключить захват событий клика в .shapes div (который оказывается виновником) и захватывать события только от svg children:

.shapes {
  pointer-events: none;
}
.shapes svg * {
  pointer-events: painted;
}

Событие клика все еще пузыритсячерез <svg>, и, таким образом, прослушиватель событий делегата по-прежнему работает без изменений.