如何让叠加的SVG元素与Vega图表同时响应onClick事件？

问题场景 #

在Vega图表上方叠加了一个SVG元素，其样式属性如下：

pointerEvents: 'none',
zIndex: 1

当前遇到的矛盾：

• 设置pointerEvents: 'none'时，SVG元素无法响应自身的onClick事件；
• 注释掉pointerEvents属性后，SVG可以响应点击，但下方的Vega图表会失去事件响应能力。
  需要实现两个相对定位的元素都能正常响应onClick事件。

可行解决方案 #

1. 给SVG内部可交互元素单独设置指针事件 #

不要给整个SVG容器设置全局的pointerEvents，而是仅针对SVG内部需要响应点击的元素（比如某个按钮图形、可点击区域）添加pointer-events: auto样式，其余非交互区域保持pointer-events: none。这样只有指定的交互区域会拦截鼠标事件，其他区域会自动穿透到下方的Vega图表，两者的点击事件都能正常触发。

2. 通过事件委托处理SVG点击逻辑 #

保持SVG的pointerEvents: 'none'设置，然后在两者的共同父容器上监听点击事件。在事件回调中，通过判断点击的坐标是否落在SVG的可交互区域范围内，手动触发SVG对应的点击处理函数。这种方式下，Vega图表的事件不受影响，同时SVG的交互逻辑也能正常执行。

3. 拆分SVG的交互与非交互区域 #

如果SVG仅覆盖Vega图表的一小部分，可以将SVG拆分为两个独立元素：

• 一个是纯覆盖用的SVG（设置pointerEvents: 'none'），负责视觉覆盖；
• 另一个是仅包含可交互区域的小型SVG（不设置pointerEvents: 'none'，保持zIndex: 1），放在对应位置。
  这样Vega图表的大部分区域能正常响应事件，SVG的交互区域也能正常触发点击。

内容的提问来源于stack exchange，提问作者Osman Mamun