如何在svg元素中使用z索引?

我在我的项目中使用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。

当前回答

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

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

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

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

2022-11-18 21:20:48

其他回答

这是关于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出现在堆栈顶部，它可能不是最好的选择。

2022-01-24 21:13:38

将SVG元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

目标:是一个我们需要把它放在顶部的元素是元素的容器

2018-07-29 09:12:52

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

2015-03-06 18:15:41

Use可以达到这个目的，但是那些被放置在Use help之后的元素很难操作…… 在我使用它之后，我不明白的是:为什么我不能在use元素上悬停(无论是鼠标悬停，鼠标进入操作都不能工作)来获得额外的功能-比如~在圆圈上显示文本~ 之后返回到圆圈重新排序，因为这是操作svg对象的唯一方式

2023-01-16 15:53:08

我们已经到了2019年，SVG仍然不支持z-index。

您可以在Mozilla的SVG2支持站点上看到z-index的状态-未实现。

你也可以在网站Bug 360148“支持SVG元素上的'z-index'属性”(报告:12年前)上看到。

但在SVG中有3种设置方法:

与element.appendChild(孩子); parentNode。方法(newNode referenceNode); targetElement。insertAdjacentElement (positionStr newElement);(IE不支持SVG)

交互式演示示例