SVG重新排序z-index（拉斐尔可选） [英] SVG re-ordering z-index (Raphael optional)

问题描述

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

How can I reorder Raphael or their underlying SVG elements after creation. Better yet, do something like layers exist in SVG?

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

Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If that is not an option, popping elements to the front would be ok, and pushing it to the back would be better in this particular case.

谢谢，

推荐答案

Gimme the Code！

Gimme the Code!

// 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（） ：

Within Raphael specifically, it's even easier by using toBack() and toFront():

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

详细信息

SVG使用绘制模型：文档中稍后出现的项目将在文档中较早出现的元素之后（在其上方）绘制。要更改项目的分层，必须使用 appendChild 或 insertBefore 等。

Details

SVG uses a "painters model" when drawing objects: items that appear later in the document are drawn after (on top of) elements that appear earlier in the document. To change the layering of items, you must re-order the elements in the DOM, using appendChild or insertBefore or the like.

您可以看到此示例这里： http://phrogz.net/SVG/drag_under_transformation.xhtml

You can see an example of this here: http://phrogz.net/SVG/drag_under_transformation.xhtml

1. 拖动红色和蓝色物体以使它们重叠。


2. 单击每个对象并观察它弹出到顶部。 （但是，黄色圆圈始终是可见的。）

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

The re-ordering of elements on this example is done by lines 93/94 of the source code:

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

当鼠标按下一个元素时，它被移动到它的所有元素的最后一个元素兄弟姐妹，导致它最后，在所有其他人的顶部。

When the mouse is pushed down on an element, it is moved to be the last element of all its siblings, causing it to draw last, "on top" of all others.

这篇关于SVG重新排序z-index（拉斐尔可选）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！