Заголовок внутри SVG rect не отображается

Question

У меня есть компонент React, в котором я просматриваю некоторые элементы, и для каждого из них я возвращаю маркер, представленный rect, который имеет title и окрашен в svg. Маркер отображается правильно в svg, но всплывающая подсказка не отображается, когда я навис над ним.

Вот что мой SVG выглядит

Мои svg более или менее следующую структуру:

<svg> 
    <g> 
     {this.renderLines()} 
     {this.renderMarkers()} 
    </g> 
</svg> 

И каждый маркер создается, как это, где key, x, y, color , и name приведены некоторые параметры:

<rect key={key} 
     width='8px' 
     height='8px' 
     x={x} 
     y={y} 
     fill={color} > 
     <title>{name}</title> 
</rect> 

Если мне нужно предоставить дополнительную информацию или код, сообщите мне.

EDIT

Итак, я нашел, где проблема, но не знаю, как это исправить, не нарушая код.

Компонент имеет следующую структуру после того, как все:

<svg> 
    <g> 
     {this.renderLines()} 
     {this.renderMarkers()} 
    </g> 
    <rect /> 
</svg> 

, где rect получает обработчик масштабирования, прикрепленный к нему с помощью d3 библиотеки, для того, чтобы иметь диаграмму функциональных возможностей масштабирования. Проблема в том, что этот прямоугольник находится на переднем плане, и поэтому событие onHover маркеров не запускается.

Перемещение области увеличения rect сверху svg решает всплывающую подсказку, показывая проблему, но когда мышь над маркером, то зум не работает. Он должен mouseOut маркера для его работы.

Answer 1

Ну, я, наконец, решил. Вот что я сделал:

1. сделал rect первым ребенком из svg
2. прикрепленных функциональность масштабирования к rect маркерам через ref как обратный вызов