title: mouse events on overlapping SVG elements
body: <p>How to handle click events on overlapping svg elements? I am using Reaphael.js library.</p>
  <p>Problem is that top <code>&lt;svg&gt;</code> 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?</p>
  <p>Here is my code:</p>
  <p><strong>CSS:</strong></p>
  <pre><code>#container {
    position: relative;
    width: 200px;
    height: 200px
  }
  
  #container&gt;svg {
    position: absolute !important;
    top: 0;
    left: 0;
  }
  </code></pre>
  <p><strong>JavaScript:</strong></p>
  <pre><code>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')});
  </code></pre>
  <p>Working <a href="https://jsfiddle.net/pangorgo/cqf7k/" rel="nofollow noreferrer">JSFiddle</a> example</p>
  <p><strong>PS:</strong> I know that I can achieve layering in single <code>&lt;svg&gt;</code> DOM elemnt, but this is not a case. My bottom SVG element have zoom and pan capabilities, while top SVG element should be static.</p>