如何迭代snap.svg中的組元素/子元素？

Question

假設我有一個叫做「group1」的類型爲<g>的svg組，其中包含多個子項（其他形狀等）。我想用snap.svg迭代它們。

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

    // doesn't work 

}); 

有什麼想法？

Answer 1

您可以找到捕捉文檔進行的forEach here

首先，你需要使用s.selectAll代替s.select這裏。

var set = s.selectAll 

選擇會選擇的第一要素，全選將選擇所有的CSS選擇器匹配，並且把它們放在一個集合的元素，這樣你就可以用你的forEach。

然後你可以迭代它們，類似於你的例子。所以我會使用'*'選擇器來獲取孩子。

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

如果沒有特別需要在foreach，因爲你只是想設定一些屬性給他們，你都不可能避免，因爲一些方法可以應用於集。所以上面的例子也可以寫成像...

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