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庫連接到它的變焦處理程序中，爲了使圖表具有縮放功能。問題在於這個矩形位於前景，因此標記的事件不會被觸發。

將rect放大窗格移動到svg的頂部可以解決顯示問題的工具提示，但是當鼠標位於標記上時，縮放功能不起作用。它必須爲其工作的標記mouseOut。

Answer 1

那麼，我終於解決了它。下面是我做的：

1. 由rect的通過ref連接縮放功能性的rect標記爲回調svg
2. 第一個孩子