Как сделать SVG-схему поезда кликабельной?

Question

[iggymori]

У меня есть схема поезда

Для того, чтобы с ней можно было взаимодействовать я использовал рефы

let seatsList = ref.current.querySelector('#Seats').childNodes          
seatsList.forEach( (pathTag: any, i= 0) => {
    const placeId = freePlacesArr.findIndex((place) => place.Place === pathTag.id.replace('Seat',''))
    pathTag.onmouseenter = () => {showPrice(freePlacesArr[placeId])}
    pathTag.onmouseleave = () => {hidePrice()}
    pathTag.onmouseover = (e: any) => {followMouse(e)}
    pathTag.onclick = () => {peakPlaceHandler(pathTag.id.replace('Seat', ''))
};
pathTag.setAttribute('class', peakedPlaces.find(place => place.placeNum === pathTag.id.replace('Seat','')) ? s.SeatPeaked : s.Seat);

На места на этой схеме можно нажать, однако внутри SVG имеется "g id="Numbers"" отвечающий за отображение цифр, и цифры мешают нажимать на места, а z-index изменить не получается.

Я пытался сделать это таким способом, однако это не помогло:

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

Styles:

.numbers {
    z-index: -1;
}

Comments

[Ivan Bogachev]

В будущем используйте тег code для вставки кода.

Answer 1

[Ivan Bogachev]

цифры мешают нажимать на места, а z-index изменить не получается

У SVG-элементов есть атрибут pointer-events. Работает он по той же логике, что и в CSS. Так что можно выключить интерактивность цифр, или что там еще мешает.

А "z-index" там работает по принципу "что раньше нарисовано - то ниже, что позже нарисовано - то выше". А отрисовывается все в том порядке, в котором оно в SVG-коде написано.

Comments

[iggymori]

спасибо большое!