如何在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()