How to traverse an SVG as a tree structure with SnapSVG?

Question

I'm trying SnapSVG and some common tasks are easy to perform with it. However, I can't seem to figure out how to traverse an SVG file as a tree structure. From what I can gather in the documentation select() and selectAll() which either select a single element or collapses groups.

I'm using bunch of groups that look like this:

If I do select("g) this hierarchy is collapsed.

I can use plain JS and document.querySelector() to access elements, but I was hoping to use some of SnapSVG's features.

What is the recommended way to traverse a tree hierarchy with SnapSVG ?

Ian · Accepted Answer

selectAll() with a forEach() would be my normal way...you can combine them as well,

So Snap('#FC1') or Snap('g') selects the first g element or you can use paper.select('#FC1') if you already have an svg/group element. You can then use select/selectAll on that element (as long as its a container element like g/svg).

You can combine, for example...

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

This would select the first g element, and then select all of the g elements inside the first g element.

When you use Snap( selector ) or selectAll type thing, behind the scenes its using a css querySelectorAll, so you can think of them similar.

For example, if you had several nested 'g's, you could use a css selector to specify the first level, parse through that, and act on them...eg

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

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

jsfiddle

Or if you want, you can access the DOM directly, with something like

el.node.children

And reference them, you can alwaya 'Snapify' them to use Snap again with Snap(DOMelement) as you loop through them.

How to traverse an SVG as a tree structure with SnapSVG?

Answers (1)

Related Questions