重叠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来操作名为pointer-events的css属性.这将导致允许所有事件流经使用pointer-events:none标记的图层.

你可以看到这个小提琴:http://jsfiddle.net/krul/6SmQ9/2/

#container {
    pointer-events:none;
    position: relative;
    width: 200px;
    height: 200px
}
#container>svg {
    pointer-events:none;
    position: absolute !important;
    top: 0;
    left: 0;
}
svg circle {
    pointer-events:visible;    
}