SVG 重新排序 z-index(Raphael 可选) [英] 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.

谢谢，

推荐答案

给我代码！

// 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(Raphael 可选)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！