SVG 矩形内的标题未显示

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>

如果我需要提供更多信息或代码，请告诉我。

编辑

所以，我找到了问题所在，但不知道如何在不破坏代码的情况下解决它。

组件毕竟有如下结构：

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

rect 通过d3 库获取附加到它的缩放处理程序，以便图表具有缩放功能。问题是这个矩形在前台，因此标记的onHover 事件没有被触发。

将rect 缩放窗格移动到svg 顶部可以解决工具提示显示问题，但是当鼠标悬停在标记上时，缩放不起作用。它必须mouseOut 才能工作。

Answer 1

好吧，我终于解决了。这是我所做的：

1. 使rect成为svg的第一个孩子
2. 通过ref 作为回调将缩放功能附加到rect 标记