使用JavaScript，我可以更改SVG <g>元素的Z索引/图层吗？
比方说，我有几个复合形状（ <g> ）。 我想能够点击并拖动它们，但是我想要的是我现在正在拖动的那个在Z顺序中位于另一个的顶部，所以如果我把它拖到另一个的另一个上，另一个一个应该黯然失色。
SVG中的Z索引由元素在文档中出现的顺序来定义。 如果要将特定的形状放在顶部，则必须更改元素顺序。
在树中移动元素的另一种方法是使用<use>元素来更改xlink:href属性，以便为您提供所需的z顺序。
这里是svg-developers邮件列表上的一个老话题，在讨论这个主题的时候想要给一些形状添加animation。
更新：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%; height: 100%"> <circle id="c1" cx="50" cy="50" r="40" fill="lime" /> <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" /> <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" /> <use id="use" xlink:href="#c1" /> </svg>
在这个例子中，<use>元素是最后一个元素。 我们可以通过改变xlink:href属性来select任何其他元素作为最前面的元素。 在上面的例子中，我们select了id="c1"的圆圈，这使得它成为最顶层的元素。
看小提琴 。
这是个老问题，但…
在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 ==自己replace==重绘
另一个没有提到的解决scheme是将每个svg项目/项目集合放入一个div。 你可以很容易地改变div的z-index。
小提琴：SVG元素周期与容器z指数
…按下button将该元素“推”到前面。 （重新绘制整个集合并将1个元素推到前面，但保持原来的顺序在公认的解决scheme中）
有相对的Z指数将是非常好的…
stackOverflow希望我把代码，如果它是从jsfiddle链接？… ook
var orderArray=[0,1,2]; var divArray = document.querySelectorAll('.shape'); var buttonArray = document.querySelectorAll('.button'); for(var i=0;i<buttonArray.length;i++){ buttonArray[i].onclick=function(){ var localI = i; return function(){clickHandler(orderArray.indexOf(localI));}; }(); } function clickHandler(divIndex) { orderArray.push(orderArray.splice(divIndex, 1)[0]); orderDivs(); } function orderDivs(){ for(var i=0;i<orderArray.length;i++){ divArray[orderArray[i]].style.zIndex=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%; }
<div class="shape"> <svg> <circle cx="50" cy="50" r="40" fill="lime" /> </svg> </div> <div class="shape"> <svg> <rect x="4" y="20" width="200" height="50" fill="cyan" /> </svg> </div> <div class="shape"> <svg> <circle cx="70" cy="70" r="50" fill="fuchsia" /> </svg> </div> <div class='button first'>lime</div> <div class='button second'>cyan</div> <div class='button third'>fuchsia</div>
如果使用svg.js库 ，则可以使用“.front（）”命令将任何元素移动到顶部。
是的顺序是什么指定什么对象将在另一个之前。 要操纵顺序，您需要移动有关DOM的东西。 https://www.w3.org/TR/SVG/render.html#RenderingOrder在SVG维基上有一个很好的例子;
SVG使用渲染的“画家模型”。 在连续的操作中将油漆应用于输出设备，使得每个操作在输出设备的某个区域上绘画。 当该区域重叠以前的油漆区域，新的油漆部分或完全遮蔽了旧的
亚当布拉德利对萨姆的回答的评论恰恰是关键。 它只使用jQuery而不是CSS，但他这样说：
$('#thing-i-want-on-top').appendTo('#my-svg');
但是，对于我创build的内容，我需要将我的SVGpath放在hover上方的任何其他path上，但仍低于我的SVG文本。 所以这就是我想到的：
$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');
appendTo和insertBefore都会将你的元素移动到一个新的位置，允许你随意改变SVG元素的深度。
在SVG中，为了获得更大的Z索引，应该把元素向下移动到DOM树中。 你可以用jQuery来做到这一点，selectSVG元素，删除它，并将其附加到你想要的位置：
$('g.element').remove().appendTo('svg');
