How to get Inner tags in <g> tags in svg?

Question

I am working with SVG <g> tags using JavaScript. I need get the inner tags (eg: rect, path, etc) in each of the <g> tags.

This is what I used to get a particular tag.

var stess = selectedElement.getElementsByTagName('rect');
console.log(stess);

But I have dynamic tags as well. how should I retrieve the values of the inner tags? More so, how could I change the width of these inner tags?

Here is the code that I tried:

$('.test').change(function() {
            console.log(selectedElement.children()); // Results Error
}

I end up logging <g id="xxx" fill-opacity="1" stroke-opacity="1"><rect></g>. How should I proceed?

Answer 1

Grabbing a Child (er, can I write that?)

First, to grab all of the children of a <g> tag, you could use the childNodes attribute (big example here):

var allGs = document.getElementsByTagName('g');
var firstG = allGs[0];
var firstChild = firstG.childNodes[0];

Then you could grab each child's bounding box to grab the width/height. I'd use the getBBox method (source):

var boundingBox= firstChild.getBBox();
var width = boundingBox.width

For more on bounding boxes, check out the docs.

Here's an example Fiddle showing how to get the attribute from a child.

---

Multiple Children

And here's another example Fiddle that grabs the widths of all the children of each <g> tag -- or see the relevant code below:

var allGs = document.getElementsByTagName('g');

for (var i=0; i<allGs.length; i++) {
 var gElem = allGs[i];
 var children = gElem.children;

 // `children` is an array of the form [child, child, ...].

 for (var j=0; j < children.length; j++){
  var child = children[j];   
  var box = child.getBBox();
  var width = box.width;

  //... Now do whatever you wanted to do with the width.

 }
}

Note: element.childNodes will collect unwanted whitespace between children elements; element.children only selects the children (Docs). Thanks, Eric!

---

Setting Attributes

A quick note that if all you want to do is change the width, you don't need to grab the bound box; you can just use the setAttribute method (source). For example, if you wanted to set the width of the first child to 100px:

//A condensed version of the "firstChild" retrieval from before:
var firstChild = document.getElementsByTagName('g')[0].childNodes[0];
var newWidth = 100;
firstChild.setAttribute("width", newWidth)

Example Fiddle

---

Retrieving Attributes

Regarding retrieving other "values" -- that depends on what you mean. If you want an attribute, then you could just use the getAttribute method (documentation) of each child instead of grabbing the BBox's width (SO post with examples). That is done in a similar way to how we sets an attribute in the code snippet above:

//A condensed version of the "firstChild" retrieval from before:
var firstChild = document.getElementsByTagName('g')[0].childNodes[0];
var value = firstChild.getAttribute("src")
// ... Now do what you will with that value.

Example Fiddle