SVG 重新排序 z 索引（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 使用 "画家模型" 绘制对象时：文档中稍后出现的项目将在之后绘制（在) 文档中较早出现的元素。要更改项目的分层，您必须使用 appendChild 或 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);

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

Answer 2

如果您使用 Raphael，向后和向前弹出元素非常简单：

element.toBack()
element.toFront()

这是相关文档。

Answer 3

SVG 中没有 z 索引，代码中后面的对象出现在第一个对象的上方。因此，根据您的需要，您可以将节点移动到树的开头或结尾。

(group) 元素是 svg 中的通用容器，因此它们可以是您的图层。只需在组之间移动节点即可实现您的需要。

Answer 4

如果您预定义图形对象，则可以随着时间的推移以不同的顺序对它们进行分层：

<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>

Answer 5

我还没有尝试过，但是 SVG 渲染顺序 看起来可以成为一个解决方案。而且“z-index”即将到来，它已经在 提案中

Answer 6

实际上，我认为单独的appendChild()会复制元素，而不仅仅是移动它。这可能不是问题，但如果您想避免重复，我建议如下：

el.parentNode.appendChild(el.parentNode.removeChild(el));