我在我的项目中使用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 的分支。
使用带有属性 xlink:href（对于SVG 2只需使用href）和元素 id 作为值的 use 标签。请记住，即使结果看起来不错，这可能不是最佳解决方案。如果有一点时间，这里是规范的链接SVG 1.1“use”元素。
目的：
避免要求作者修改引用文档以添加根元素的 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规范是下一个主要版本，仍然支持上述功能。
SVG中的元素在三个维度上定位。除了它们在SVG视口的x和y轴上的位置之外，SVG元素还在z轴上定位。在z轴上的位置定义了它们被绘制的顺序。
沿着z轴，元素被分组成堆叠上下文。
...
堆叠上下文是用来描述文档呈现时元素必须按顺序绘制在另一个元素的顶部或底部的概念工具...
href而不是附加的已弃用命名空间xlink:href（感谢G07cha）xlink:href已被弃用，取而代之的是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>基本思路是：
Use D3 to select the SVG DOM elements.
var circles = d3.selectAll('circle')
Create some array of z-indices with a 1:1 relationship with your SVG elements (that you want to reorder). Z-index arrays used in the examples below are IDs, x & y position, radii, etc....
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]
}
Then, use D3 to bind your z-indices to that selection.
circles.data(zOrders[setOrderBy]);
Lastly, call D3.sort to reorder the elements in the DOM based on the data.
circles.sort(setOrder);
[3,4,1,2,5]将第三个圆（在原始HTML顺序中）移动到DOM中的第一个位置，第四个圆移动到第二个位置，第一个圆移动到第三个位置，等等...#one和#two。查看此代码片段：http://jsfiddle.net/hu2pk/3/
更新
在SVG中，z-index是由元素出现在文档中的顺序定义的。如果您想的话，也可以查看这个页面：https://dev59.com/MHRB5IYBdhLWcg3w4bAo#482147。d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); }; 这段代码的作用是将选中的元素移动到其父元素的最前面。然后你可以使用 selection.moveToFront() 来调用它。这个代码片段来自于 https://dev59.com/8WYq5IYBdhLWcg3w0T1y。 - mb21#one 会被绘制两次。但是如果你想的话，可以通过 CSS 隐藏第一个实例。use 具有与克隆所引用的 DOM 元素相同的效果。 - Jose Rui Santos如所讨论，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:
使用D3:
如果您想按顺序将每个已选择的元素重新插入其父元素作为最后一个子元素。
selection.raise()
selection.raise()是D3 v4中的新功能，用于将选定元素提升至其同级元素的顶部。 - tephyrSVG图形没有z-index属性。但是，SVG通过DOM中元素的位置来确定哪些元素最上层。因此，您可以删除该对象并将其放置在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 = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty