绘制后排序 svg 元素

Question

我正在使用 React 来动态绘制方框和信息。当用户将鼠标悬停在框上时，信息可见。此功能有效。

我的问题是当一个元素在另一个元素之后呈现时，该信息框将位于前一个框的下方。信息框应始终位于顶部。这是目前的解决方案。

<svg>
    <g>
        <rect> <!-- Always visible -->
        <text> <!-- Visible on rect hover -->
    </g>
    <g>
        <rect> <!-- Always visible -->
        <text> <!-- Visible on rect hover -->
    </g>
    ...
</svg>

我知道这个问题可以通过重新组合组件来解决，但后来我运行通过将鼠标悬停在框上来解决问题。有没有类似于老式 z-index 的方法来解决这个问题？

Answer 1

我最终找到的解决方案是将它们分组为框和信息框，然后在“信息框”组中添加一个不可见的框来侦听悬停事件。

<svg>
    <g>
        <g>
            <rect> <!-- Always visible -->
        </g>
        <g>
            <rect> <!-- Always visible -->
        </g>
        ...
    </g>
    <g>
        <g>
            <rect> <!-- Always invisible -->
            <text> <!-- Visible on rect hover -->
        </g>
        <g>
            <rect> <!-- Always invisible -->
            <text> <!-- Visible on rect hover -->
        </g>
        ...
    </g>
    ...
</svg>

绘制后排序 svg 元素

Ordering svg elements after drawing

html

svg

z-index