使用JavaScript,我可以更改SVG <g>元素的Z索引/层吗？

这是老问题,但......

在FireFox(7+)和Chrome(14+)上,您可以将svg_element拉到顶部.这并没有给你完全z轴控制的自由,但它总比没有好;)

只需再次添加该元素即可.

var svg = doc.createElemNS('svg');
var circle = doc.createElemNS('circle');
var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it
svg.appendChild(line);   // appends it over circle
svg.appendChild(circle); // redraws it over line now

我以为它会抛出错误或其他东西.

appendChild ==替换自己==重绘

是的，顺序是指定哪个对象将在另一个对象之前的顺序。要操纵顺序，您将需要移动有关DOM的内容。SVG Wiki上有一个很好的例子，网址为https://www.w3.org/TR/SVG11/render.html#RenderingOrder

未提及的另一种解决方案是将每个svg项目/项目集放入div。您可以轻松更改div的z索引。

小提琴：SVG元素以z-index为容器循环

...按下按钮可将该元素“推”到前面。（vs重新粉刷整个集合并将1个元素推到前面，但保持原始顺序与接受的解决方案中一样）

具有相对的z索引将非常好...

如果它是来自jsfiddle的链接，stackOverflow要我放代码吗？

var orderArray=[0,1,2];
var divArray = document.querySelectorAll('.shape');
var buttonArray = document.querySelectorAll('.button');

for(var i=0;i
svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
div{
    position:absolute;
}
div.button{
    top:55%;
    height:5%;
    width:15%;
    border-style: outset;
    cursor:pointer;
    text-align: center;
    background:rgb(175, 175, 234);
    
}
div.button:hover{
    border-style: inset;
    background:yellow;
    
}
div.button.first{
    left:0%;
}
div.button.second{
    left:20%;
}
div.button.third{
    left:40%;
}


    


    


    


lime
cyan
fuchsia