javascript - 拉斐尔 JS : bring set to front

Question

我希望有人能告诉我如何在 Raphael JS 中将一整套元素放在前面。

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

我已尝试使用 .toFront()，如下所述:http://raphaeljs.com/reference.html#Element.toFront

然而，这并没有正常工作。每组包含一个圆或一个圆扇区、一个文本元素以及一个附加圆或一个附加扇区。

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

Answer 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 如果需要...