mouse events on overlapping SVG elements

Question

How to handle click events on overlapping svg elements? I am using Reaphael.js library.

Problem is that top <svg> DOM element is intercepting mouse event, even if bottom element is not overlapped by any drawing. My question is how to make both circles in my example clickable and still keep them in two svg elemnts?

Here is my code:

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')});

Working JSFiddle example

PS: I know that I can achieve layering in single <svg> DOM elemnt, but this is not a case. My bottom SVG element have zoom and pan capabilities, while top SVG element should be static.

Answer 1

You can manipulate css property called pointer-events by setting it to none. This will result in allowing all events flowing through the layer that is marked with pointer-events:none.

You can see this fiddle: https://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;    
}