我在我的项目中使用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。
当前回答
试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/
更新
在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751
其他回答
只是想添加一个技巧，当你想把一个特定的元素放在上面。
function moveInFront(element) {
const svg = element.closest('svg'); // Find the parent SVG
svg.appendChild(element); // Append child moves the element to the end
}
这是因为(引用文档)“appendChild()将[元素]从当前位置移动到新位置”，而不是添加一个副本。
注意:如果元素是嵌套的，则必须在组内将元素移动到前面，也许还必须将组移动到前面。
一个更好的例子，我已经用过了。
<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
使用D3:
如果希望按顺序重新插入每个选定元素，将其作为其父元素的最后一个子元素。
selection.raise()
如前所述，svg按顺序呈现，(目前)不考虑z-index。也许只是把特定的元素发送到它的父元素的底部，这样它就会最后呈现。
function bringToTop(targetElement){
// put the element at the bottom of its parent
let parent = targetElement.parentNode;
parent.appendChild(targetElement);
}
// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));
为我工作。
更新
如果您有一个嵌套的SVG，其中包含组，则需要将项目从其parentNode中取出。
function bringToTopofSVG(targetElement){
let parent = targetElement.ownerSVGElement;
parent.appendChild(targetElement);
}
SVG的一个很好的特性是每个元素都包含它的位置，而不管它嵌套在哪个组中:+1:
你可以利用利用。
<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
