snap.svg의 그룹 요소/하위 항목을 반복하는 방법은 무엇입니까?

Question

여러 개의 자식 (다른 모양 등)이있는 "group1"이라는 <g> 유형의 svg 그룹이 있습니다. 나는 그들을 snap.svg를 사용하여 반복하고 싶습니다.

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

    // doesn't work 

}); 

아이디어가 있습니까?

Answer 1

당신은 첫째로, 당신이 여기 s.select 대신 s.selectAll를 사용해야 대해 forEach here

의 스냅 문서를 찾을 수 있습니다. 당신이 다음 대해 forEach를 사용할 수 있도록 선택의 첫 번째 요소를 선택합니다

var set = s.selectAll 

이는 selectAll는 CSS 셀렉터와 일치하고 세트에 넣어 모든 요소를 ​​선택합니다.

그런 다음 예제와 유사하게 반복 할 수 있습니다. 그래서 '*'선택자를 사용하여 예를 들어 어린이를 가져옵니다. 당신은 단지 그들에게 몇 가지 속성을 설정하려는 당신이 구체적으로 foreach 문이 필요하지 않은 경우 몇 가지 방법이 세트에 적용 할 수있는

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

, 당신은 아마도 그것을 피할 수 있습니다. 그래서 위의 예제는 다음과 같이 쓰여질 수 있습니다.

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