How to make SVG train scheme clickable?

Question

I have this SVG scheme.

The main problem, there is a 'g id='Numbers'' inside the SVG and I can't change the z-index of the numbers, they interfere with clicking on the svg.

I tried to solve this problem by using refs

import s from './styles.module.scss'

const ModifySVG = () => 
{
    if (ref.current !== null)
    {
          let seatsList = ref.current.querySelector('#Numbers').childNodes
          seatsList.forEach( (pathTag: any) => 
          {
             pathTag.setAttribute('class', s.numbers);
          })
    }
}    

Css - style:

.numbers{
  z-index: -1;
} 

Answer 1

SVG elements do not regard z-index . Use pointer-events to click through the text elements.

 rect:hover{ fill: orange } text:hover{ fill: orange }

 <svg> <rect x="0" y="0" width="100" height="100" fill="red"/> <text x="5" y="50" font-size="25px" fill="blue">HOVER</text> <text x="5" y="70" font-size="25px" fill="blue">ME?</text> </svg> <svg> <rect x="0" y="0" width="100" height="100" fill="green"/> <text x="5" y="50" font-size="25px" fill="blue" pointer-events="none">HOVER</text> <text x="5" y="70" font-size="25px" fill="blue" pointer-events="none">ME?</text> </svg>