SVG z-index reordering (Raphael option)

Question

How can I reorder Raphael or their basic SVG elements after creation. Is it even better to do something like layers in SVG?

Ideally, I would like to add two or more layers in which to place elements at any time; Background and foreground layer. If this is not an option, then the pop-ups on the front panel would be fine, and in this particular case it would be better to press the back.

Thank,

Answer 1

Hand over 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); 

Inside Raphael, this is simpler using toBack() and toFront() :

 raphElement.toBack() // Move this element below/behind all others raphElement.toFront() // Move this element above/in front of all others 

More details

SVG uses the “artist model” when drawing objects: elements that appear later in the document are drawn after (on top) the elements that appear earlier in the document. To change the splitting of elements, you must reorder the elements in the DOM using appendChild or insertBefore or the like .

Here you can see an example: http://phrogz.net/SVG/drag_under_transformation.xhtml

• Drag the red and blue objects so that they overlap.
• Click on each object and see how it is pushed up. (However, yellow circles should always be visible.)

The reordering of elements in 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 clicked on an element, it moves as the last element of all its brothers and sisters, forcing it to draw the last one, “on top” of all the others.

Answer 2

If you are using Raphael, the popup elements back and forth are very simple:

 element.toBack() element.toFront() 

Here is the relevant documentation .

Answer 3

There is no z-index in SVG, objects that appear above the first at the end of the code. Therefore, for your needs, you can move the node to the beginning of the tree or its end.

Element

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

Answer 4

If you predefine your graphic objects, you can add them in different orders as time progresses:

 <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 5

I haven't tried it yet, but SVG Rendering Order looks like it might be a solution. And also "z-index" is suitable, it is already in proposal

Answer 6

Actually, I think that only appendChild () 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));