Jump to content


SVG appendChild at specific childNode

Moderator Tag
Go to solution Solved by PointC,

Recommended Posts

I am able to move a grouped element within my SVG to the front of all other elements using appendChild, but how do I put it back into the same Z level that I took it from?


Before the appendChild code runs the Firebase group is on the bottom of the SVG stack; after the code runs it is on the top. How do I put it back to its original bottom position.


See the Pen KKxQLOE by sandalwoodsh (@sandalwoodsh) on CodePen

Link to comment
Share on other sites

See the Pen eYLMYLd by sandalwoodsh (@sandalwoodsh) on CodePen


The solution I opted for was to clone the object and append the clone to the SVG; that way the original remains intact. Since I only want to bring the group <g> to the front, it works for my purposes. Once I'm done with the clone, I can remove it and the original element still exists in its proper layer within the SVG stack.

Link to comment
Share on other sites

I think both answers provide a solution depending on one's needs.

I definitely realize that PointC has a much broader and deeper depth of knowledge; so I bow to his expertise.

  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.