如何在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' });