我在我的项目中使用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。
当前回答
通过transform:TranslateZ移动到前面
警告:仅适用于FireFox
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" style="width:160px;身高:160 px;" > <g style=" font - family:宋体;"> <g id="one" style=" font - family:宋体;"> <circle fill="green" cx="100" cy="105" r="20" style="transform:TranslateZ(1px);" > < /圆> < / g > <g id="two" style=" font - family:宋体;"> <圆填充= "橙色"残雪= " 100 " cy = " 95 " r = " 20 " > < /圆> < / g > < / g > < / svg >
其他回答
将SVG元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。
var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);
目标:是一个我们需要把它放在顶部的元素 是元素的容器
我们已经到了2019年，SVG仍然不支持z-index。
您可以在Mozilla的SVG2支持站点上看到z-index的状态-未实现。
你也可以在网站Bug 360148“支持SVG元素上的'z-index'属性”(报告:12年前)上看到。
但在SVG中有3种设置方法:
与element.appendChild(孩子); parentNode。方法(newNode referenceNode); targetElement。insertAdjacentElement (positionStr newElement);(IE不支持SVG)
交互式演示示例
这三个函数。
var state = 0, index = 100; document.onclick = function(e) { if(e.target.getAttribute('class') == 'clickable') { var parent = e.target.parentNode; if(state == 0) parent.appendChild(e.target); else if(state == 1) parent.insertBefore(e.target, null); //null - adds it on the end else if(state == 2) parent.insertAdjacentElement('beforeend', e.target); else e.target.style.zIndex = index++; } }; if(!document.querySelector('svg').insertAdjacentElement) { var label = document.querySelectorAll('label')[2]; label.setAttribute('disabled','disabled'); label.style.color = '#aaa'; label.style.background = '#eee'; label.style.cursor = 'not-allowed'; label.title = 'This function is not supported in SVG for your browser.'; } label{background:#cef;padding:5px;cursor:pointer} .clickable{cursor:pointer} With: <label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label> <label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br> <label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label> <label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label> <br> <svg width="150" height="150" viewBox="0 0 150 150"> <g stroke="none"> <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/> <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/> <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/> </g> </svg>
正如其他人所说，z-index是由元素在DOM中出现的顺序定义的。如果手动重新排序你的html不是一个选项或将是困难的，你可以使用D3重新排序SVG组/对象。
使用D3更新DOM顺序和模仿Z-Index功能
使用D3更新SVG元素Z-Index
在最基本的级别上(如果您没有将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);
例子
可以按ID进行堆叠
最左边的SVG在上面
上面的半径最小
或者指定一个数组来为特定的顺序应用z-index——在我的示例代码中，数组[3,4,1,2,5]移动/重新排序第3个圆(在原始HTML顺序中)，使其在DOM中处于第1位，第4位为第2位，第1位为第3位，以此类推……
一个更好的例子，我已经用过了。
<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
另一种解决方案是使用div，它使用zIndex来包含SVG元素。在这里: https://stackoverflow.com/a/28904640/4552494
