SVG re-ordering z-index (Raphael optional)

Question

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

Answer 1

If you're using Raphael, popping elements backwards and forwards is very straightforward:

element.toBack()
element.toFront()

Here's the relevant documentation.

Answer 2

Actually, I think appendChild() alone will copy the element and not just move it. This may not be a problem but if you want to avoid duplicates I suggest something like this:

el.parentNode.appendChild(el.parentNode.removeChild(el));

Answer 3

If you predefine your graphic objects, you can then layer them in different orders as time evolves:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000" fill="black"/>
  <defs>
    <rect id="a1" x="0"   y="0"   width="500" height="500" fill="red"/>
    <rect id="a2" x="100" y="100" width="500" height="500" fill="blue"/>
  </defs>
  <g> 
    <use xlink:href="#a1"/>
    <use xlink:href="#a2"/>
    <set attributeName="visibility"  to="hidden" begin="2s"/> 
  </g>
  <g visibility="hidden"> 
    <use xlink:href="#a2"/>
    <use xlink:href="#a1"/>
    <set attributeName="visibility"  to="visible" begin="2s"/> 
  </g>
</svg>

Answer 4

I haven't tried it yet but SVG render order looks like it could be a solution. And also 'z-index' is coming, it is already in proposal

Answer 5

There's no z-index in SVG, objects that are later in the code appear above the first ones. So for your needs, you can move the node to the start of the tree or the end of it.

<g> (group) element is a generic container in svg, so they can be layers for you. Just move nodes between the groups to achieve what you need.

Answer 6

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

1. Drag the red and blue objects so that they overlap.
2. 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.