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?

Solution

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

Comments

[VIVEK-MDU]

Hi @sadiq.ali..How to get dynamic value.? I have path, circle and so many also..so provide brief explanation...

[VIVEK-MDU]

I need to get child tags from <g> tags. I try to get "console.log(selectedElement.childNodes);" but i`ll results rect array.I need to pass rect tags into other function so i need to get inner tag from <g> tags

[isherwood]

This question doesn't have a jQuery tag.

[defghi1977]

Try querySelector or querySelectorAll method.

[sadiq.ali]

But the question has jQuery snippet.

[Casey Falk]

jQuery doesn't always play nicely with SVGs -- best to avoid as many issues as we can. (stackoverflow.com/questions/6793312/…)

[Erik Dahlström]

For the multiple children case if you only want Elements, an option is to use Element.children instead of Element.childNodes, see dom.spec.whatwg.org/#dom-parentnode-children.

[Casey Falk]

Ahh, good to know, @ErikDahlström! Thanks. Just updated the answer to include that knowledge.