Raphael JS: 把设置放在前面答案

【问题标题】：Raphael JS: bring set to frontRaphael JS: 把设置放在前面
【发布时间】：2012-08-14 00:53:10
【问题描述】：

我希望有人能告诉我如何在 Raphael JS 中将一整套元素带到 Front。

我正在使用一些动态生成的 raphael 元素集，每个元素都存储在一个数组中，这样更容易与单个集合进行交互和定位。当用户与各种集合进行交互时，我希望能够将完整集合带到应用程序的前面。

我已尝试使用此处概述的 .toFront()：http://raphaeljs.com/reference.html#Element.toFront

但是这并没有正常工作。每个集合都包含一个圆圈或一个圆圈扇区、一个文本元素以及一个额外的圆圈或一个额外的扇区。

有什么想法吗？在任何时候，用户可能拥有多达 40/50 的这些集合，因此无论如何将这些集合放在前面将是必要的。

【问题讨论】：

标签： javascript html css indexing raphael

【解决方案1】：

我在 toFront() 函数中遇到过类似的问题... 好吧，我想说有两种方法可以做到... 第一个（不太推荐）对集合的所有元素应用循环以将它们带到前面，但仍然会根据集合中的顺序对它们进行排序......不是好方法...... set.forEach(el){ e.toFront();}

第二个真的很性感 :) 我的最爱 :) phrogz 先生完美地解释了here

我推荐使用'g'标签...简单的javascript。让你所有的集合都包含在一个 g 标记中

var mySet = document.createElementNS("http://www.w3.org/2000/svg", "g");
mySet.setAttribute('id','myset');
//should look something like this
//use jQuery append or javaScript appendChild to add your set elements to this group
<g id = 'myset'>
      <rect>
      <circle>
      //etc etc
    </g>

现在

       mySet.parentNode.appendChild(mySet); //the key line

这只会把它带到 svg 容器的底部，因此最后绘制并根据链接中的 phrogz 先生也提到的画家模型显示在顶部....您可以使用 javascript 来操作您自己的z-index 如果需要...

【讨论】：

感谢您的回复，我正在动态且连续地生成对象，所以在这种情况下，我是否需要在每次创建新集合时创建一个新的 g 标签元素，然后将该集合附加到 g标记？
不幸的是......或者你必须为集合的每个元素运行关键行...... set.forEach(function(el){ el.node.parentNode.appendChild (el.node)});但这与第一个解决方案相同......