SnapSVGを使用してSVGをツリー構造としてトラバースする方法は？

Question

私はSnapSVGを試しています。いくつかの一般的なタスクは簡単に実行できます。 しかし、ツリー構造としてSVGファイルをどのようにトラバースするのか分からないようです。文書select()とselectAll()に集められているものから、単一の要素を選択するか、グループを崩壊させます。私はこの階層が折りたたまれているselect("g)を行う場合

<g id="FC1"> 
    <g id="S2B" class="st0"> 
     <path class="st1" d="M779.838,895.4v43.897h-70.5V895.4H779.838z M709.339,895.4"></path> 
     <path class="st1" d="M922.14,895.4h70.5v43.897h-70.5V895.4z M922.14,939.297"></path> 
     <path class="st1" d="M567.471,939.297V895.4h70.5v43.897H567.471z M637.97,939.297"></path> 
     <path class="st1" d="M993.074,895.4h70.5v43.897h-70.5V895.4z M993.074,939.297"></path> 
     <path class="st1" d="M921.706,895.4v43.897h-70.5V895.4H921.706z M851.206,895.4"></path> 
     <path class="st1" d="M638.405,895.4h70.5v43.897h-70.5V895.4z M638.405,939.297"></path> 
     <path class="st1" d="M1064.008,895.4h70.5v43.897h-70.5V895.4z M1064.008,939.297"></path> 
     <path class="st1" d="M780.272,939.297V895.4h70.5v43.897H780.272z M850.772,939.297"></path> 
    </g> 
    <g id="S2A" class="st0"> 
     <path class="st1" d="M1418.243,939.297h-70.5V895.4h70.5V939.297z M1418.243,895.4"></path> 
     <path class="st1" d="M1489.611,895.4h70.5v43.897h-70.5V895.4z M1489.611,939.297"></path> 
     <path class="st1" d="M1418.677,939.297V895.4h70.5v43.897H1418.677z M1489.177,939.297"></path> 
     <path class="st1" d="M1205.441,939.297h-70.5V895.4h70.5V939.297z M1205.441,895.4"></path> 
     <path class="st1" d="M1560.545,895.4h70.5v43.897h-70.5V895.4z M1560.545,939.297"></path> 
     <path class="st1" d="M1347.309,895.4v43.897h-70.5V895.4H1347.309z M1276.809,895.4"></path> 
     <path class="st1" d="M1772.912,895.4v43.897h-70.5V895.4H1772.912z M1702.413,895.4"></path> 
     <path class="st1" d="M1773.346,895.4h70.5v43.897h-70.5V895.4z M1773.346,939.297"></path> 
     <path class="st1" d="M1914.78,939.297h-70.5V895.4h70.5V939.297z M1914.78,895.4"></path> 
     <path class="st1" d="M1701.978,939.297h-70.5V895.4h70.5V939.297z M1701.978,895.4"></path> 
     <path class="st1" d="M1276.375,939.297h-70.5V895.4h70.5V939.297z M1276.375,895.4"></path> 
    </g> 
    <g id="S2C" class="st0"> 
     <path class="st1" d="M283.735,939.297V895.4h70.5v43.897H283.735z M354.235,939.297"></path> 
     <path class="st1" d="M496.537,939.297V895.4h70.5v43.897H496.537z M567.037,939.297"></path> 
     <path class="st1" d="M425.169,939.297h-70.5V895.4h70.5V939.297z M425.169,895.4"></path> 
     <path class="st1" d="M496.103,939.297h-70.499V895.4h70.499V939.297z M496.103,895.4"></path> 
    </g> 
</g> 

：

私はこのように見えるグループの束を使用しています。

プレーンJSとdocument.querySelector()を使用して要素にアクセスできますが、SnapSVGの機能の一部を使用したいと考えていました。

SnapSVGを使用してツリー階層をトラバースするには、どのような方法が推奨されますか？

Answer 1

のSelectAll（）のforEachでは、（）私の通常の方法だろう...あなたにもそれらを組み合わせることができ、

だから、スナップ（ '＃のFC1'）またはスナップ（ 'G'）は最初グラムを選択します要素 、またはすでにsvg/group要素がある場合はpaper.select（ '＃FC1'）を使用できます。その要素に対してselect/selectAllを使用できます（g/svgなどのコンテナ要素である限り）。

あなたは、たとえば...

paper.select('g').selectAll('g').forEach(doSomethingFunc) 

これは最初のg要素を選択し、最初のg要素の内部グラム要素のすべてを選択することになり、組み合わせることができます。

スナップ（セレクタ）またはselectAll型のものを使用すると、シーンの背後にあるcss querySelectorAllを使用すると、類似していると考えることができます。

たとえば、あなたが持っていた場合には、いくつかのネストされた「Gさん、あなたは例えば...それを解析し、それらに基づいて行動、最初のレベルを指定するCSSセレクタを使用することができ

var gs3 = s.selectAll('svg>g').forEach (selectNext) 

function selectNext(el) { 
    var els = el.selectAll('g>g'); // do children 
    console.log(els) 
} 

jsfiddle

か、必要ならば、あなたは

el.node.children 

ようなもので、直接DOMにアクセスし、それらを参照することができ、あなたは彼らがスナップ（DOMELEMENTで再びスナップを使用するには「Snapify」をalwayaすることができます）をループしていきます。