SVG元素重叠先前的兄弟SVG

Question

我在圈子周围放置了多个SVG。问题是每个SVG都与其先前的兄弟SVG重叠，导致点击事件以错误的形状触发。从技术上讲，这是正确的，但从用户的角度来看，这是错误的。

Answer 1

你可以禁用.shapes div中的点击事件的捕获（结果是罪魁祸首），并且只捕获来自svg孩子的事件：

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

点击事件仍会在<svg>中冒泡，因此委托事件监听器仍可正常运行。