Put Raphael (SVG) canvas behind other divisions to make them clickable?

I am using Raphael to create lines between divisions in an organization chart (or flow chart), but I need to be able to actually click on the divisions and content behind it.

If I could make the canvas 开发者_如何转开发be behind the other elements, kind of like a background image, that would be idea. Is this possible?

I found a solution. Raphael makes an SVG canvas that is absolutely positioned in my case. Absolute positions act as layers, and so to be on top of that layer, my content had to be absolutely positioned as well.

If someone else has a better solution, I would be happy to hear it, though this is working fine.

What I do is create a layer of invisible (but clickable) shapes on top of the informational lines being rendered, which will act as the target area for the content below.

If your lower layers being target are being created in Raphael you can easily clone them, set the opacity to 0, and position that layer to the top. (See Sets Reference for a way to easily group the layers together.)

Example:

@el = @parent.paper.rect(x,y,w,h); //your existing lower layer shape definition
@elTrigger = @el.clone();   //clone your existing shape
@elTrigger.attr
    fill: '#fff'
    opacity: 0
    cursor: 'pointer'
@elTrigger.click(someAction); //assign the function

If you're lower layer isn't being rendered by Raphael (just HTML) you could still do something similar, but it would require just creating new (transparent) shapes to sit on top of the approximate coordinate of the targets below.