raphael.js 中的 z-index 分层答案

【问题标题】：z-index layering in raphael.jsraphael.js 中的 z-index 分层
【发布时间】：2015-06-19 06:45:01
【问题描述】：

我正在使用 Raphael 在不同的图层中绘制不同的形状。我想实现 CSS z-index 分层，以便无论首先执行哪个函数（draw_rect、draw_circle 或 draw_line），矩形都位于最底层，线条位于中间，圆圈位于最顶层。这是我尝试过的：

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

【问题讨论】：

标签： javascript html css raphael z-index

【解决方案1】：

Afaik 你不能用 z-index 做到这一点，除非你将它们分成单独的 svg 容器（例如覆盖纸），因为 SVG 规范使用排序来决定位置。

也没有 z-index 'attribute'，它是一种样式，所以需要通过 CSS 设置（即在 SVG 容器上）。

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

【讨论】：

我知道每次创建新对象时都可以检查，但我只是认为如果可以实现 z-indexing 会容易得多。当你在这么多不同的层上有这么多的对象时，检查就成了一个问题。
也许这有助于解释为什么它们会以随机顺序出现，以及您如何事先知道它们需要按什么顺序排列，因为这可能有助于找到一个直观的解决方案。
我正在尝试绘制显示节点之间实时连接的地图。所以地图的z-index级别最低。并且连接由连接节点（圆圈）中心的线表示。圆圈的位置以及线条正在（随机）变化。但是如果我不能做 z 索引，并且我在圆圈之后画线，这些线将被画在圆圈上。我希望圆圈重叠（在比线条更高的 z-index 上）。
你可以将圆圈放在一个具有不同 zindex 的 SVG 上，如果有帮助的话，另一个上的线条会覆盖（所以基本上有 3 篇论文，一篇用于地图，另一篇用于圆圈，另一篇用于线条.
那么，基本上，不可能只在一篇论文上实现 z-indexing 吗？

【解决方案2】：

您可以使用line.toFront()将需要的图层移到最前面。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。