Z-order and z-index in SVG for particular group or element

Question

i drawn one line in SVG using "path" tag and then i drawn circle on the same x value of line but the circle is behind the line. i want the circle element in front of line. how to set z-order or z-index to particular group or element in svg to display the element in front.

i tried z-Index attribute to circle but its not working .

<circle  .... z-Index=1000>

</circle>

Thanks,

Siva

Answer 1

SVG elements do not have a z-index that you can adjust. Their layering order is dependent on what order you draw them in the HTML. Moving an SVG object to the top, for example, is a matter of removing it from the DOM and appending it to the object's parent. Since it is the most recently drawn SVG object, it will therefore be shown on top.