SVG重新排序z-index（Raphael可选）

创建后如何重新排序Raphael或它们的基础SVG元素。更好的是，SVG中是否存在类似图层的内容？

理想情况下，我希望随时可以在其中放置元素的两层或多层；背景和前景层。如果这不是一种选择，则可以将元素弹出到前面是可以的，而在这种情况下将其推到后面会更好。

谢谢，

给我密码！

// move element "on top of" all others within the same grouping
el.parentNode.appendChild(el); 

// move element "underneath" all others within the same grouping
el.parentNode.insertBefore(el,el.parentNode.firstChild);

// move element "on top of" all others in the entire document
el.ownerSVGElement.appendChild(el); 

// move element "underneath" all others in the entire document
el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); 

特别是在Raphael中，使用toBack()和更容易toFront()：

raphElement.toBack()  // Move this element below/behind all others
raphElement.toFront() // Move this element above/in front of all others

细节

SVG在绘制对象时使用“画家模型”：文档后面出现的项目是在文档前面出现的元素之后（顶部）绘制的。要更改项目的分层，必须使用appendChild或insertBefore类似方法对DOM中的元素重新排序。

您可以在此处查看此示例：http : //phrogz.net/SVG/drag_under_transformation.xhtml

1. 拖动红色和蓝色对象，使其重叠。
2. 单击每个对象，然后看它弹出到顶部。（但是，黄色圆圈始终总是可见的。）

此示例中元素的重新排序是通过源代码的第93/94行完成的：

el.addEventListener('mousedown',function(e){
  el.parentNode.appendChild(el); // move to top
  ...
},false);

当将鼠标向下推到某个元素上时，它将移动到其所有同级的最后一个元素上，从而使其在所有其他元素的“顶部”绘制。

如果您使用的是Raphael，则向后和向前弹出元素非常简单：

element.toBack()
element.toFront()

这是相关的文档。

SVG中没有z-index，代码后面的对象出现在第一个对象的上方。因此，根据您的需要，可以将节点移动到树的开头或树的结尾。

<g>（group）元素是svg中的通用容器，因此它们可以作为您的图层。只需在组之间移动节点即可实现所需的功能。

如果预先定义了图形对象，则可以随着时间的流逝按不同的顺序对其进行分层：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000" fill="black"/>
  <defs>
    <rect id="a1" x="0"   y="0"   width="500" height="500" fill="red"/>
    <rect id="a2" x="100" y="100" width="500" height="500" fill="blue"/>
  </defs>
  <g> 
    <use xlink:href="#a1"/>
    <use xlink:href="#a2"/>
    <set attributeName="visibility"  to="hidden" begin="2s"/> 
  </g>
  <g visibility="hidden"> 
    <use xlink:href="#a2"/>
    <use xlink:href="#a1"/>
    <set attributeName="visibility"  to="visible" begin="2s"/> 
  </g>
</svg>

我还没有尝试过，但是SVG渲染顺序看起来可能是一个解决方案。而且“ z-index”即将到来，已经在提案中

实际上，我认为单独的appendChild（）会复制元素，而不仅仅是移动它。这可能不是问题，但是如果您想避免重复，我建议使用以下方法：

el.parentNode.appendChild(el.parentNode.removeChild(el));