Ordering svg elements after drawing

Question

I'm using react to dynamically draw out boxes and information. The information is visible when the user hovers the mouse over a box. This functionality works.

My issue is when an element is rendered after another element, then that information box will be underneath the previous box. The information box should always be on top. This is the current solution.

<svg>
    <g>
        <rect> <!-- Always visible -->
        <text> <!-- Visible on rect hover -->
    </g>
    <g>
        <rect> <!-- Always visible -->
        <text> <!-- Visible on rect hover -->
    </g>
    ...
</svg>

I know the issue can be solved by regrouping the components, but then I run into the issue with hovering over the boxes. Is there a way to solve this similar to the old-fashion z-index?

Answer 1

The solution I eventually found was to group them as boxes and infoboxes, and then in the "infoboxes" group add an invisible box that listened for hover events.

<svg>
    <g>
        <g>
            <rect> <!-- Always visible -->
        </g>
        <g>
            <rect> <!-- Always visible -->
        </g>
        ...
    </g>
    <g>
        <g>
            <rect> <!-- Always invisible -->
            <text> <!-- Visible on rect hover -->
        </g>
        <g>
            <rect> <!-- Always invisible -->
            <text> <!-- Visible on rect hover -->
        </g>
        ...
    </g>
    ...
</svg>