我在我的项目中使用svg圆圈,像这样,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

我在g标签中使用z索引来显示第一个元素。在我的项目中,我只需要使用z-index值,但我不能使用我的svg元素的z-index。我在谷歌上搜了很多,但没有找到相关的东西。 所以请帮助我在我的svg中使用z-index。

这里是DEMO。


当前回答

使用D3:

如果希望按顺序重新插入每个选定元素,将其作为其父元素的最后一个子元素。

selection.raise()

其他回答

通过transform:TranslateZ移动到前面

警告:仅适用于FireFox

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" style="width:160px;身高:160 px;" > <g style=" font - family:宋体;"> <g id="one" style=" font - family:宋体;"> <circle fill="green" cx="100" cy="105" r="20" style="transform:TranslateZ(1px);" > < /圆> < / g > <g id="two" style=" font - family:宋体;"> <圆填充= "橙色"残雪= " 100 " cy = " 95 " r = " 20 " > < /圆> < / g > < / g > < / svg >

这是关于z-index和svg搜索的顶级谷歌结果。看完所有的答案后,有些答案很好,但我还是很困惑。

因此,对于像我这样的新手来说,这是目前的总结,9年后的2022年。

svg不能用z指数。

在svg中,z-index由元素在文档中出现的顺序定义。

如果你想要一些东西出现在顶部,或更接近用户,最后绘制或插入它之前。源

SVG 2可以支持z-index,但可能永远不会出现

SVG 2是一个实现这些功能和其他功能的提议,但它面临着永远无法向前发展的风险。

SVG 2于2016年进入候选推荐阶段,并于2018年进行了修订,最新草案于2021年6月8日发布。源

然而,它并没有得到很多的支持,很少有人在做这件事。所以不要屏住呼吸等这个消息。

你可以使用D3,但可能不应该

通常用于可视化数据的D3通过绑定你的z-index,然后排序来支持z-index,但它是一个大而复杂的库,如果你只是想让某个SVG出现在堆栈顶部,它可能不是最好的选择。

只是想添加一个技巧,当你想把一个特定的元素放在上面。

function moveInFront(element) {
    const svg = element.closest('svg'); // Find the parent SVG
    svg.appendChild(element); // Append child moves the element to the end
}

这是因为(引用文档)“appendChild()将[元素]从当前位置移动到新位置”,而不是添加一个副本。

注意:如果元素是嵌套的,则必须在组内将元素移动到前面,也许还必须将组移动到前面。

使用D3:

如果希望按顺序重新插入每个选定元素,将其作为其父元素的最后一个子元素。

selection.raise()

另一种解决方案是使用div,它使用zIndex来包含SVG元素。在这里: https://stackoverflow.com/a/28904640/4552494