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

假设我有两个复合形状（

）。我希望能够单击并拖动它们，但我希望我正在拖动的一个按Z顺序位于另一个的顶部，这样，如果我将它拖动到另一个上面，另一个应该会被遮住。

SVG中的Z索引由元素在文档中的显示顺序定义。如果要将特定形状置于顶部，则必须更改元素顺序。

是的，顺序用于指定在另一个之前的对象。要操纵顺序，需要移动DOM中的内容。SVG wiki上有一个很好的例子，在树中移动元素的另一种方法是使用

元素，在其中更改

xlink:href

属性，以便为您提供所需的z顺序

这里有一个关于svg开发人员的邮件列表，在希望为某些形状设置动画的上下文中讨论此主题

更新：

<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>

在本例中，元素是最后一个元素，因此它是最前面的元素。只需更改

xlink:href

属性，就可以选择任何其他元素作为最前面的元素。在上面的示例中，我们选择了带有

id=“c1”

的圆，使其显示为最上面的元素

---

看。

这是个老问题，但是

在FireFox（7+）和Chrome（14+）上，您可以将svg_元素拉到顶部。这并没有给您完全控制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==替换自身==重新绘制

---

SVG

使用“画师模型”进行渲染。涂料在连续操作中应用于输出设备，以便每次操作都在输出设备的某个区域上涂料。当该区域与先前绘制的区域重叠时，新绘制部分或完全遮挡了旧绘制区域。-

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

…按下按钮，将该元件“推”到前面。（vs重新绘制整个集合并将1个元素推到前面，但保持接受的解决方案中的原始顺序）

这将是非常好的相对z指数

stackOverflow希望我把代码放在JSFIDLE？…ook的链接上

var orderArray=[0,1,2]；
var divArray=document.querySelectorAll（'.shape'）；
var buttonArray=document.querySelectorAll（'.button'）；
对于（var i=0；i如果您使用，您可以使用“.front（）”命令将任何元素移动到顶部。
Adam Bradley对Sam答案的评论正好切中要害。它使用jQuery而不是CSS，但他说：

$('#thing-i-want-on-top').appendTo('#my-svg');

然而，对于我正在创建的内容，我需要SVG路径高于悬停时的任何其他路径，但仍然低于SVG文本

$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');

appendTo和insertBefore都会将元素移动到一个新位置，允许您随意更改SVG元素的深度。
在SVG中，要获得更大的Z索引，您应该在DOM树中向下移动元素。您可以使用jQuery执行此操作，选择SVG元素，删除它，然后在所需位置再次追加它：

$('g.element').remove().appendTo('svg');

该链接不再起作用。该链接解释了相同的想法：根本不是错误；
appendChild
首先从旧的父级中删除，如果有的话，即使它与新的父级相同，然后将其添加到新父级的子级列表中。请参阅。如果有一个示例或该邮件中的信息，该答案的可能重复会更有用ing列表（它是门控的）。可以工作，但会使您添加适当的用法。如果您使用翻译，则不知道them@JochenBedersdorfer不知道你的意思是什么，翻译与z排序有什么关系？我不是很清楚。如果你在转换中使用嵌套标记，你需要使用getTransfermToElement（..）转换坐标；（参见SVG文档）
xlink:href
已被弃用，现在它只是
href
@文档末尾的onlygusti元素位于顶部。如果您使用jQuery，您应该能够使用类似
$（“#thing-i-want-on-top”）的内容。因此，基本上，没有办法将形状浮动到顶部（z轴）悬停时…？jQuery不支持更改SVG路径的顺序。@chharvey，您可以通过重新排序-重新追加来将内容浮动到顶部。下面是一个优雅的示例：