Wie man ein SVG als Baumstruktur mit SnapSVG durchläuft?

Question

Ich versuche SnapSVG und einige häufige Aufgaben sind damit einfach durchzuführen. Allerdings kann ich nicht herausfinden, wie man eine SVG-Datei als Baumstruktur durchläuft. Von dem, was ich in der Dokumentation select() und selectAll() sammeln kann, die entweder ein einzelnes Element auswählen oder Gruppen zusammenfasst.

I Bündel von Gruppen bin mit, die wie folgt aussehen:

<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> 

Wenn ich select("g) tun diese Hierarchie kollabiert ist.

Ich kann plain JS und document.querySelector() verwenden, um auf Elemente zuzugreifen, aber ich hatte gehofft, einige SnapSVG-Funktionen zu verwenden.

Was ist die empfohlene Methode zum Durchlaufen einer Baumhierarchie mit SnapSVG?

Answer 1

selectAll() mit einem foreach() würde meine normale Art und Weise sein ... Sie sie als gut kombinieren können,

So Schnapp ('# FC1') oder Schnapp ('g') wählt die ersten g Element oder Sie können paper.select ('# FC1') verwenden, wenn Sie bereits ein SVG/Gruppenelement haben. Sie können dann select/selectAll für dieses Element verwenden (solange es ein Containerelement wie g/svg ist).

können Sie kombinieren, zum Beispiel ...

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

dies das erste Element g wählen würde, und dann alle der g-Elemente innerhalb des ersten g Element auszuwählen.

Wenn Sie Snap (Selektor) oder selectAll Typ Ding, hinter den Kulissen verwenden Sie eine css querySelectorAll, so dass Sie an sie ähnlich denken können.

Zum Beispiel, wenn Sie mehr verschachtelten ‚gs haben, kann man einen CSS-Selektor verwenden, um die erste Ebene zu spezifizieren, durch das Analysieren und wirkt auf sie ... zB

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

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

jsfiddle

Oder wenn Sie möchten, können Sie das DOM direkt zugreifen können, mit so etwas wie

el.node.children 

Und sie verweisen, können Sie alwaya ‚Snapify‘ sie Fang verwenden wieder mit Schnapp (DOMElement) während du durch sie hindurchschleifst.