如何有选择地将鼠标事件传递给底层 svg 元素

Question

我有一个散点图，带有用于放大数据的画笔层和用于鼠标悬停捕捉的 voronois，但问题是 voronoi 路径不会让点击事件落入画笔层，或者如果将画笔保持在顶部它不会'不允许悬停事件通过 voronoi 层

画笔层需要点击事件

Voronoi 层需要悬停事件

我应该如何进行设置，最好只使用 css 解决方案

保持画笔层在顶部：

将 voronoi 层保持在顶部：

Answer 1

我在 voronoi 悬停时将画笔保持在底部，但它在边缘闪烁

$("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly").css("pointer-events", "all");

setTimeout(function() {
    $("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly.voronoi-movie-id-" + d.id).css("pointer-events", "none");
}, 10);

编辑：

我最终使用热键“CTRL”在按下 voronoi 层时暂时禁用鼠标事件，它为缩放过程增加了一个额外的步骤，但它更平滑。