snap.svg에서 그룹의 요소/자식을 반복하는 방법은 무엇입니까? (How to iterate on a group's elements/children in snap.svg?)

문제 설명

snap.svg에서 그룹의 요소/자식을 반복하는 방법은 무엇입니까? (How to iterate on a group's elements/children in snap.svg?)

많은 자식(기타 모양 등)이 있는 "group1"이라는 유형의 svg 그룹이 있다고 가정해 보겠습니다. snap.svg를 사용하여 반복하고 싶습니다.

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

   // doesn't work

});

아이디어가 있습니까?

참조 솔루션

방법 1:

You can find the Snap doc for forEach here

Firstly, you need to use s.selectAll instead of s.select here.

var set = s.selectAll

Select will choose the first element, selectAll will choose all of the elements that match the css selector and put them in a Set, so you can then use your forEach.

Then you can iterate over them, similar to what your example. So I would use the '*' selector to get the children for example.

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

If you don't specifically need the forEach, as you just want to set some attributes to them, you can possibly avoid it, as some methods can be applied to sets. So the above example could also be written like...

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

(by Shai UI、Ian)

참조 문서

1. How to iterate on a group's elements/children in snap.svg? (CC BY‑SA 2.5/3.0/4.0)