时间戳

首页 > 解决方案 > 绘制后订购 svg 元素

html - 绘制后订购 svg 元素

问题描述

我正在使用 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 的问题？

标签： htmlsvgz-index

解决方案

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

<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>

推荐阅读