重叠SVG元素上的鼠标事件

Question

如何处理重叠的svg元素上的点击事件？我正在使用Reaphael.js库。

问题是顶部<svg> DOM元素正在拦截鼠标事件，即使底部元素未与任何图形重叠。我的问题是如何使示例中的两个圆圈都可点击，并且仍将其保留在两个svg元素中？

这是我的代码：

CSS：

#container {
  position: relative;
  width: 200px;
  height: 200px
}

#container>svg {
  position: absolute !important;
  top: 0;
  left: 0;
}

Javascript：

var topLayer = Raphael('container', 200, 200);

var bottomLayer = Raphael('container', 200, 200);

topLayer.circle(100, 100, 50)
  .attr({
    fill: 'red',
    stroke: false
  })
  .mousedown(function(){alert('Top layer')});

bottomLayer.circle(120, 120, 50)
  .attr({
    fill: 'pink',
    stroke: false
  })
  .mousedown(function(){alert('Bottom layer')});

工作Jsfiddle示例

PS：我知道我可以在单个<svg> DOM元素中实现分层，但是不是这种情况。我的底部SVG元素具有缩放和平移功能，而顶部SVG元素应为静态。

Answer 1

您可以通过将其设置为none来操纵称为指针事件的css属性。这将导致所有事件都流过标有pointer-events：none的层。