你可以利用利用。

<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>
    <use xlink:href="#one" />
</svg>

绿色圆圈出现在顶部。 jsFiddle

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

规范

在SVG规范1.1版本中，呈现顺序是基于文档顺序的:

first element -> "painted" first

参考SVG 1.1。规范

3.3渲染顺序 SVG文档片段中的元素有一个隐式的绘制顺序，SVG文档片段中的第一个元素首先“绘制”。后续的元素被绘制在先前绘制的元素之上。

解决方案(cleaner-faster)

你应该把绿色的圆圈作为最近要绘制的对象。交换这两个元素。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> <！首先画一个橙色的圆——> <circle fill="orange" cx="100" cy="95" r="20"/> <！——然后在当前画布上绘制绿色圆圈——> <圆填充="绿色" cx="100" cy="105" r="20"/> < / svg >

这里是jsFiddle的fork。

解决方案(选择)

该标记与属性xlink:href(对于SVG 2只是href)一起使用，并将元素的id作为值。请记住，这可能不是最好的解决方案，即使结果看起来很好。有一点时间，这里是规范SVG 1.1“use”元素的链接。

目的: 避免要求作者修改所引用的文档以向根元素添加ID。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> <！——首先画一个绿色的圆——> <圆id =“1”填补=“绿色”残雪= " 100 " cy = " 105 " r = " 20 " / > <！——然后在当前画布上绘制橙色圆圈——> <圆id = "两个“填补=“橙色cx”=“100”cy = " 95 " r = " 20 " / > <！——最后在当前画布上再次绘制绿色圆圈——> <使用xlink: href = " # 1 " / > < / svg >

关于SVG 2的说明

SVG 2规范是下一个主要版本，仍然支持上述特性。

3.4. Rendering order Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted. Along the z axis, elements are grouped into stacking contexts. 3.4.1. Establishing a stacking context in SVG ... Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, ...

SVG 2支持Mozilla -绘画 我如何知道我的浏览器是否支持svg 2.0 我可以使用SVG吗? 对于SVG 2，使用href代替额外的已弃用名称空间XLink:href(感谢G07cha)

使用D3:

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

selection.raise()

我们已经到了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)

交互式演示示例

这三个函数。

var state = 0, index = 100; document.onclick = function(e) { if(e.target.getAttribute('class') == 'clickable') { var parent = e.target.parentNode; if(state == 0) parent.appendChild(e.target); else if(state == 1) parent.insertBefore(e.target, null); //null - adds it on the end else if(state == 2) parent.insertAdjacentElement('beforeend', e.target); else e.target.style.zIndex = index++; } }; if(!document.querySelector('svg').insertAdjacentElement) { var label = document.querySelectorAll('label')[2]; label.setAttribute('disabled','disabled'); label.style.color = '#aaa'; label.style.background = '#eee'; label.style.cursor = 'not-allowed'; label.title = 'This function is not supported in SVG for your browser.'; } label{background:#cef;padding:5px;cursor:pointer} .clickable{cursor:pointer} With: <label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label> <label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br> <label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label> <label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label> <br> <svg width="150" height="150" viewBox="0 0 150 150"> <g stroke="none"> <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/> <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/> <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/> </g> </svg>

试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/

更新

在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751