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

Question

假设我有一个类型为<g>的svg组，称为“ group1”，具有多个子级（其他形状等）。 我想使用snap.svg对其进行迭代。

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

   // doesn't work

});

有任何想法吗？

Answer 1

您可以在此处找到forEach的Snap文档

首先，您需要在此处使用s.selectAll而不是s.select。

var set = s.selectAll

Select将选择第一个元素，selectAll将选择所有与css选择器匹配的元素并将它们放入Set中，以便随后可以使用forEach。

然后，您可以遍历它们，类似于您的示例。 因此，我将使用“ *”选择器来获取子级。

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

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

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