我在我的项目中使用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。
当前回答
svg没有z指数。但是svg根据元素在DOM中的位置来确定它们的最上面。因此，您可以删除Object并将其放置到svg的末尾，使其成为“最后渲染”元素。然后将其呈现为视觉上的“最顶层”。
使用jQuery:
function moveUp(thisObject){
thisObject.appendTo(thisObject.parents('svg>g'));
}
用法:
moveUp($('#myTopElement'));
使用D3.js:
d3.selection.prototype.moveUp = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
用法:
myTopElement.moveUp();
其他回答
这是关于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元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。
var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);
目标:是一个我们需要把它放在顶部的元素 是元素的容器
试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/
更新
在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751
svg没有z指数。但是svg根据元素在DOM中的位置来确定它们的最上面。因此，您可以删除Object并将其放置到svg的末尾，使其成为“最后渲染”元素。然后将其呈现为视觉上的“最顶层”。
使用jQuery:
function moveUp(thisObject){
thisObject.appendTo(thisObject.parents('svg>g'));
}
用法:
moveUp($('#myTopElement'));
使用D3.js:
d3.selection.prototype.moveUp = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
用法:
myTopElement.moveUp();
一个更好的例子，我已经用过了。
<svg>
<defs>
<circle id="one" fill="green" cx="40" cy="40" r="20" />
<circle id="two" fill="orange" cx="50" cy="40" r="20"/>
</defs>
<use href="#two" />
<use href="#one" />
</svg>
为了控制顺序，你可以改变这些use元素的href属性值。这对动画制作很有用。
多亏了defs，圆圈元素只绘制一次。
jsfiddle.net/7msv2w5d
