Javascript raphael.js中的z索引分层

我用拉斐尔在不同的图层上画不同的形状。我想实现CSS Z索引分层，以便不管首先执行哪一个函数（DouthReCt，DracyCoul或DrabyLoad），矩形都保持在最底层、最中间、最顶层的圆和圆。以下是我尝试过的：

draw_rect(10, 10, 180, 180); 
draw_circle(100, 100, 60);
draw_line();
function draw_rect(x, y, width, height) {
  var rect = paper.rect(x, y, width, height);
  rect.attr({
    fill: 'red',
    position: 'absolute',
    'z-index': 1
  });
}
function draw_circle(x, y, radius) {
  var circ = paper.circle(x, y, radius);
  circ.attr({
    fill: 'green',
    position: 'absolute',
    'z-index': 3
  });
}
function draw_line() {
  var line = paper.path("M0,0L200,200");
  line.attr({
    'stroke': 'blue',
    position: 'absolute',
    'z-index': 2
  });
}

---

我不能使用element.tofront（）&element.toback（），因为表达式只将元素带到顶层/底层（而不是中间层）。因此，如果有人能启发我做z-index分层，我将永远感激：d

好吧，你不能用z-index来做这件事，除非你可能将它们分离到单独的svg容器中（例如重叠的纸张），因为svg规范使用排序来决定位置

此外，没有z-index“attribute”，这是一种样式，因此需要通过CSS（即SVG容器）进行设置

---

否则，您将不得不通过DOM排序来完成。您可以使用类似el.insertBefore（）/After（）的东西来帮助将它们定位到正确的位置，但这可能需要您包含一些额外的逻辑。例如，您可以将每个对象放在一个集合中，并在运行时检查它们，或者使用selectAll语句查看以前的对象是否已绘制，这样您就可以在之前/之后添加它们。

我知道每次创建新对象时都可以检查，但我只是认为，如果能够实现z索引，将非常容易。当你在这么多不同的层上有这么多的对象时，检查就成了一个问题。也许这有助于解释为什么它们会以随机顺序出现，以及如何事先知道它们需要的顺序，因为这可能有助于找到直观的解决方案。我正试图绘制一张地图，显示节点之间的实时连接。因此，地图处于最低的z索引级别。连接由连接节点（圆）中心的线表示。圆和线的位置正在（随机）更改。但是如果我不能做z索引，我在圆后画线，线就会画在圆上。我希望圆重叠（在比线更高的z索引上）。您可以将圆放在一个具有不同zindex的SVG上，如果这样有帮助的话，将线放在另一个SVG上（所以基本上有3张纸，一张是地图，一张是圆，另一张是线。所以，基本上，不可能只在一张纸上实现z索引？