SVG re-ordering z-index (Raphael optional)

by

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.

More Related Contents:

  1. How to access SVG elements with Javascript
  2. Programmatically creating an SVG image element with javascript
  3. jQuery SVG vs. Raphael [closed]
  4. How to use z-index in svg elements?
  5. Alternative for deprecated SVG pathSegList
  6. How to check if an embedded SVG document is loaded in an html page?
  7. How can d3.transform be used in d3 v4?
  8. d3 add text to circle
  9. jQuery Selector + SVG Incompatible?
  10. Save inline SVG as JPEG/PNG/SVG
  11. Hit-testing SVG shapes?
  12. Convert inline SVG to Base64 string
  13. How to start an animated SVG on entering viewport?
  14. D3 – how to deal with JSON data structures?
  15. How do you detect support for VML or SVG in a browser
  16. Including SVG template in Angularjs directive
  17. SVG – click is not a function [duplicate]
  18. Add names of the states to a map in d3.js
  19. Add text label to d3 node in Force directed Graph and resize on hover
  20. Convert SVG Path to Absolute Commands
  21. Creating SVG graphics using Javascript?
  22. Rasterizing an in-document SVG to Canvas
  23. Accessing a DOM object defined in an external SVG file
  24. Dynamically created SVG elements are not rendered by the browser
  25. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  26. How can I combine objects in the Raphael javascript library?
  27. Perspective transform of SVG paths (four corner distort)
  28. Does the attr() in jQuery force lowercase?
  29. draw text in d3 arc javascript
  30. Create a table in SVG

Leave a Comment