Question

Okay, this has made me feel a little peevish because it seems like it should be straightforward but… it’s not?

I have a situation where I am layering several SVGs and divs over the top of each other using specific z-index attributes to control their rendering order. All of that works fine, but the only way I can discover to get the DOM node for a given paper element is as follows:

// given containerID, width, height, and zIndex are in scope
var canvas = Raphael( containerID, width, height );
var tempObject = canvas.rect( 0, 0, 1, 1, 0 ).attr( { fill: 'none', stroke: 'none' } );
var svgNode = tempObject.node.parentNode;
$(svgNode).css( { 'z-index': zIndex } );

This works, but it is patently inelegant. Anyone know how to get the paper’s svg node directly?

Answer 1

canvas.canvas should do the trick.

To avoid naming confusion, you can do:

var paper = Raphael( containerID, width, height );
var svgNode = paper.canvas;