SVG re-ordering z-index (Raphael optional)
How can I reorder Raphael or their underlying SVG elements after creation. Better yet, do something like layers exist in SVG?
Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If that is not an option, popping elements to the front would be ok, and pushing it to the back would be better in this particular case.
Thanks,
Answer
Gimme the Code!
// move element "on top of" all others within the same grouping
el.parentNode.appendChild(el);
// move element "underneath" all others within the same grouping
el.parentNode.insertBefore(el,el.parentNode.firstChild);
// move element "on top of" all others in the entire document
el.ownerSVGElement.appendChild(el);
// move element "underneath" all others in the entire document
el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild);
Within Raphael specifically, it's even easier by using toBack() and toFront():
raphElement.toBack() // Move this element below/behind all others
raphElement.toFront() // Move this element above/in front of all others
Details
SVG uses a "painters model" when drawing objects: items that appear later in the document are drawn after (on top of) elements that appear earlier in the document. To change the layering of items, you must re-order the elements in the DOM, using appendChild or insertBefore or the like.
You can see an example of this here: http://phrogz.net/SVG/drag_under_transformation.xhtml
- Drag the red and blue objects so that they overlap.
- Click on each object and watch it pop to the top. (The yellow circles are intended to always be visible, however.)
The re-ordering of elements on this example is done by lines 93/94 of the source code:
el.addEventListener('mousedown',function(e){
el.parentNode.appendChild(el); // move to top
...
},false);
When the mouse is pushed down on an element, it is moved to be the last element of all its siblings, causing it to draw last, "on top" of all others.