Question

我使用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（）＆amp; element.toback（）因为表达式只将元素带到顶层/底层（而不是中间层）。所以，如果有人可以启发我做z-index分层，我会感谢永恒：D

Answer 1

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

此外，没有z-index'属性'，它是一种样式，因此需要通过CSS设置（即在SVG容器上）。

否则你必须通过DOM排序来做。您可以使用类似el.insertBefore（）/ After（）之类的东西来帮助将它们放置到正确的位置，但这可能需要您包含一些额外的逻辑。例如，您可以将每个放置在一个集合中并随时检查它们，或者使用selectAll语句来查看是否已绘制了之前的声明，因此您可以在之前/之后添加它们。

raphael.js中的z-index分层

1 个答案: