如何在svg元素中使用z-index？
我在这个项目中使用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元素。 我GOOGLE了很多，但我没有find任何相对的东西。 所以请帮我在我的svg中使用z-index。
这是DEMO。
规范
在SVG规范版本1.1中，渲染顺序基于文档顺序：
first element -> "painted" first
参考规范： SVG 1.1渲染顺序
3.3渲染顺序
SVG文档片段中的元素具有隐式绘制顺序，SVG文档片段中的第一个元素首先被“绘制”。 随后的元素被绘制在先前绘制的元素的顶部。
解决scheme（清洁更快）
你应该把绿色的圆圈作为最新的绘制对象。
<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>
尝试反转#one和#two 。 看看这个小提琴： http : //jsfiddle.net/hu2pk/3/
Update
在SVG中， z-index是由元素在文档中出现的顺序定义的 。 如果你想的话，你也可以看看这个页面： https : //stackoverflow.com/a/482147/1932751
你可以使用使用 。
<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是由元素在DOM中出现的顺序定义的。 如果手动重新sorting你的html不是一个选项，或者很难，你可以使用D3重新sortingSVG组/对象。
使用D3更新DOM顺序和模仿Z-Indexfunction
使用D3更新SVG元素Z索引
在最基本的层面上（如果你没有使用其他的ID），你可以使用元素ID作为z-index的替身，并重新sorting。 除此之外，你几乎可以让你的想象力疯狂。
代码片段中的示例
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="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>
svgs没有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();
使用D3：
如果您想以相反顺序将元素添加到数据使用中：
.insert('g', ":first-child")
而不是.append
将元素添加到组元素的顶部
另一个解决scheme是使用div，它使用zIndex来包含SVG元素。如下所示： https : //stackoverflow.com/a/28904640/4552494
正如所讨论的，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"));
为我工作。
使用D3：
如果要按顺序重新插入每个选定元素作为其父项的最后一个子项。
selection.raise()
