SVG重新排序z-index(拉斐尔可选)

Question

如何在创建后重新排序Raphael或其基础SVG元素.更好的是,在SVG中存在类似层的东西吗？

理想情况下,我希望在任何时候放置元素的两层或更多层; 背景和前景层.如果这不是一个选项,那么将元素弹出到前面就可以了,在这种特殊情况下将它推到后面会更好.

谢谢,

Answer 1

给我代码!

// 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);

当鼠标被按下一个元素时,它被移动到它所有兄弟姐妹的最后一个元素,导致它最后绘制,在所有其他兄弟的"顶部".

Answer 2

如果您正在使用Raphael,那么向后和向前弹出元素非常简单:

element.toBack()
element.toFront()

这是相关文档.