How to make a SVG box created by Raphaeljs transparent to mouse events

Question

I'd like to create a SVG overlay over my webpage using "z-index:1000" and make this overlay transparent to mouse events. However right now if I create a SVG object at absolute position using i.e. this call:

r = Raphael(0,0,150,150);
r.path("M0 0L150 150").attr('cursor','crosshair');
$(r.canvas).css({'z-index':1000, 'position':'absolute'});

the html content below the SVG object region (0,0 ,150,150) will be seen but I cannot click at them because I guess the SVG canvas is taking the mouse events.

Is there a way to tell the SVG canvas and the elements in it to be completely transparent to mouse events?