Group and sort for SVG elements

I recently develop SVG and encounter a problem: I need to let my text above my shape. Because there are many texts on page, I cannot simply use z-index CSS property. When finding how to sort elements, I found a pen on codepen.

It uses g element, which offer elements an container to contain elements, and sort their priority.

I was cried when found that worked.

References