我在我的项目中像这样使用 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-index来首先显示元素。在我的项目中，我只需要使用 z-index 值，但我不能将 z-index 用于我的 svg 元素。我用谷歌搜索了很多，但我没有找到任何相对的东西。所以请帮助我在我的 svg 中使用 z-index。
这是演示。
在 SVG 规范 1.1 版中，渲染顺序基于文档顺序：
first element -> "painted" first
SVG 文档片段中的元素具有隐式绘制顺序，SVG 文档片段中的第一个元素首先“绘制”。后续元素绘制在先前绘制的元素之上。
您应该将绿色圆圈作为要绘制的最新对象。所以交换两个元素。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
<!-- First draw the orange circle -->
<circle fill="orange" cx="100" cy="95" r="20"/>
<!-- Then draw the green circle over the current canvas -->
<circle fill="green" cx="100" cy="105" r="20"/>
</svg>这里是你的jsFiddle 的分支。
use带有属性的标签xlink:href（仅href适用于SVG 2）和元素的 id 作为值。请记住，即使结果看起来不错，这也可能不是最佳解决方案。有一点时间，这里是规范SVG 1.1 “使用” Element 的链接。
目的：
避免要求作者修改引用的文档以将 ID 添加到根元素。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
<!-- First draw the green circle -->
<circle id="one" fill="green" cx="100" cy="105" r="20" />
<!-- Then draw the orange circle over the current canvas -->
<circle id="two" fill="orange" cx="100" cy="95" r="20" />
<!-- Finally draw again the green circle over the current canvas -->
<use xlink:href="#one"/>
</svg>SVG 2 Specification是下一个主要版本，仍然支持上述功能。
SVG 中的元素在三个维度上定位。除了它们在 SVG 视口的 x 和 y 轴上的位置之外，SVG 元素还位于 z 轴上。z 轴上的位置定义了它们的绘制顺序。
沿着 z 轴，元素被分组到堆叠上下文中。
...
堆叠上下文是概念性工具，用于描述渲染文档时元素必须在另一个之上绘制的顺序，......
href而不是额外的弃用命名空间xlink:href（感谢G07cha）正如这里的其他人所说，z-index 是由元素在 DOM 中出现的顺序定义的。如果手动重新排序您的 html 不是一种选择或很困难，您可以使用 D3 重新排序 SVG 组/对象。
在最基本的层面上（如果您不将 ID 用于其他任何用途），您可以使用元素 ID 作为 z-index 的替代品，并使用它们重新排序。除此之外，您几乎可以尽情发挥您的想象力。
代码片段中的示例
var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
.attr('transform', 'translate(' + [5,100] + ')')
var zOrders = {
IDs: circles[0].map(function(cv){ return cv.id; }),
xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
customOrder: [3, 4, 1, 2, 5]
}
var setOrderBy = 'IDs';
var setOrder = d3.descending;
label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<circle id="1" fill="green" cx="50" cy="40" r="20"/>
<circle id="2" fill="orange" cx="60" cy="50" r="18"/>
<circle id="3" fill="red" cx="40" cy="55" r="10"/>
<circle id="4" fill="blue" cx="70" cy="20" r="30"/>
<circle id="5" fill="pink" cx="35" cy="20" r="15"/>
</svg>基本思想是：
使用 D3 选择 SVG DOM 元素。
var circles = d3.selectAll('circle')
创建一些与 SVG 元素（要重新排序）具有 1:1 关系的 z 索引数组。以下示例中使用的 Z-index 数组是 ID、x 和 y 位置、半径等......
var zOrders = {
IDs: circles[0].map(function(cv){ return cv.id; }),
xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
customOrder: [3, 4, 1, 2, 5]
}
然后，使用 D3 将您的 z 索引绑定到该选择。
circles.data(zOrders[setOrderBy]);
最后，调用 D3.sort 根据数据对 DOM 中的元素重新排序。
circles.sort(setOrder);
[3,4,1,2,5]移动/重新排序第三个圆圈（以原始 HTML 顺序）在 DOM 中为第一，第四为第二，第一为第三， 等等...尝试反转#one和#two。看看这个小提琴：http : //jsfiddle.net/hu2pk/3/
Update
在 SVG 中，z-index 由元素在文档中出现的顺序定义。如果需要，您也可以查看此页面：https : //stackoverflow.com/a/482147/1932751
如前所述，svgs 按顺序呈现并且不考虑 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：