javascript - SVG 重新排序 z-index(Raphael 可选)

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 使用 "painters model"绘制对象时:在文档中较晚出现的项目绘制在文档中较早出现的元素之后(在其之上)。要更改项目的分层，您必须使用 appendChild 重新排列 DOM 中的元素。或 insertBefore等等。

您可以在此处查看示例: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);

当鼠标在一个元素上按下时，它会移动到其所有兄弟元素的最后一个元素，导致它最后绘制，“在所有其他元素之上”。