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

Question

假设我有一个 <g> 类型的 svg 组称为“group1”，它有许多子项(其他形状等)。我想使用 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

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

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

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

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

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