SVG矩形内的标题未显示

Question

我有一个React组件，我在其中映射了一些元素，对于每个元素，我返回一个由rect表示的标记title，并在{ {1}}。标记在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库获取缩放处理程序，以使图表具有缩放功能。问题是这个rec​​t位于前台，因此标记的d3事件不会被触发。

移动onHover顶部的rect缩放窗格解决了显示问题的工具提示，但当鼠标悬停在标记上时，缩放功能无效。它必须svg标记才能生效。

Answer 1

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

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