SVG重新sortingz-index（Raphael可选）
我如何在创build后重新订购Raphael或其基础SVG元素。 更好的是，像SVG中存在的图层一样？
理想情况下，我希望随时可以在其中放置两个或多个图层。 背景和前景图层。 如果这不是一个选项，那么前面的元素就会popup来，在这个特殊的情况下推到后面会更好。
谢谢，
给我的代码！
// 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中的元素进行重新sorting。
你可以在这里看到这个例子： http : //phrogz.net/SVG/drag_under_transformation.xhtml
- 拖动红色和蓝色物体，使它们重叠。
- 点击每个对象，看它popup到顶部。 （但是，黄色圆圈总是可见的。）
这个例子中元素的重新sorting是通过源代码的93/94行完成的：
el.addEventListener('mousedown',function(e){ el.parentNode.appendChild(el); // move to top ... },false);
当鼠标按下一个元素时，它被移动到所有兄弟元素的最后一个元素，导致它最后一个，在所有其他元素的“顶部”。
如果你使用拉斐尔，向后和向前popup元素是非常简单的：
element.toBack() element.toFront()
这是相关的文件 。
SVG中没有z-index，代码后面的对象出现在第一个之上。 因此，为了您的需要，您可以将节点移动到树的开始处或结束处。
<g> （group）元素是svg中的一个通用容器，所以它们可以是你的图层。 只需移动组之间的节点即可实现您所需的function。
如果您预定义了graphics对象，随着时间的推移，您可以按不同的顺序对它们进行分层：
<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渲染顺序看起来可能是一个解决scheme。 而“Z指数”即将到来，已经在提案中
其实，我认为appendChild（）本身将复制元素，而不是仅仅移动它。 这可能不是问题，但如果你想避免重复，我build议这样的事情：
el.parentNode.appendChild(el.parentNode.removeChild(el));
