如何在snap.svg中迭代一个组的元素/子元素？

Question

我们假设我有一个名为<g>的svg组，名为＆＃34; group1＆＃34;有很多孩子（其他形状等）。我想使用snap.svg迭代它们。

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

   // doesn't work

});

任何想法？

Answer 1

您可以找到forEach here

的Snap文档

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

var set = s.selectAll

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

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

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

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

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