Let's say I have a couple composite shapes (<g>). I want to be able to click and drag them, but I want the one I happen to be dragging at the moment to be on TOP of the other one in the Z order, so that if I drag it over the OTHER one, the other one should be eclipsed.
With JavaScript, can I change the Z index/layer of an SVG <g> element?
Viewed 92367
9 Answers
Z index in SVG is defined by the order the elements appear in the document (subsequent elements are painted on top of previous elements).
You will have to change the element order if you want to bring a specific shape to the top.
Yes the order is what specifies what object will be in front of the other. To manipulate the order you will need to move things about the DOM. There is a good example of this on the SVG wiki at https://www.w3.org/TR/SVG11/render.html#RenderingOrder
In SVG, to get a higher larger Z index you should move the element down in the DOM tree. You can do this with jQuery, selecting the SVG element, removing it and appending it again at the position you want:
$('g.element').remove().appendTo('svg');
Related