如何在 snap.svg 中迭代组的 elements/children？

Question

假设我有一个名为 "group1" 的 <g> 类型的 svg 组，它有许多子项（其他形状等）。我想使用 snap.svg.

对它们进行迭代

var group1 = s.select('#group1');
group1.forEach(function(child) {

   // doesn't work

});

有什么想法吗？

Answer 1

您可以找到 forEach 的 Snap 文档 here

首先，你需要在这里使用s.selectAll而不是s.select。

var set = s.selectAll

Select 将选择第一个元素，selectAll 将选择与 css 选择器匹配的所有元素并将它们放入一个集合中，这样您就可以使用 forEach.

然后你可以迭代它们，类似于你的例子。例如，我会使用“*”选择器来获取子项。

s.selectAll('#group1 *')
 .forEach( function( el ) {
    el.attr({ fill: 'blue' });
});

如果你不是特别需要 forEach，因为你只是想为它们设置一些属性，你可以避免它，因为一些方法可以应用于集合。所以上面的例子也可以写成...

s.selectAll('#group1 *').attr({ fill: 'red' });

How to iterate on a group's elements/children in snap.svg?