SVGloader read path IDs

Questions
1

With a linked SVG file, I can get the paths just fine. Is there a way to read the either the id or data-name for elements at the same time that the path data is being read from the the data?

2

The elements themselves are linked in the loaded data in:

loader.load( url, function ( data ) {
      let svgNode = data.paths[0].userData.node;

so you should be able to query attributes on that maybe?

3

You are on to something.
I added let svgNode = data.paths[0].userData.node.id; to my loader and it returned the ID of the <path> nested inside of <g>.
Now to figure out how to get the ID of the parent…

4

Okay, I’m real close.

My SVG has this data:
<g id="_0" data-name="0">
<g id="_0-2" data-name=" 0">
<path id="_0-3" data-name="0" d="path data goes here" >
<path id="_0-4" data-name="0" d="path data goes here" >
and so on.

Using let svgNode = data.paths[0].userData.node.parentNode.parentNode['id']; I get the ID of the parent just fine. parentNode.id works fine too, both returning “_0” as expected. I can work with this.

What I really want is the contents of “data-name” which will save me some time further down the line. I expected parentNode['data-name'] to give me that, but it returned undefined.

My understanding of the DOM is that the properties I’m looking for are in an array. I should be able to use any of the forms property.key property['key'] property[0] to all return the same information.

For ID, the first two work, but not property[0]. For the key “data-name” the hyphen prevents me from using property.key and the other two forms return undefined.

Now I get to dig a bit deeper into mechanics of searching for a list of properties/keys in an SVG file.

5

use parentNode.dataset.name

2 Likes
6

And in general, you can use DOM methods to get the desired elements, in particular data.xml.querySelector()

2 Likes
7

This is exactly what I needed, both to solve my immediate problem and to open up a whole new skill tree to develop.

2 Likes