How does one get the height/width of an SVG group element?

Question

I need to know the width and height of a SVG element? Im trying to use the following:

$('g#myGroup').height() 

...but the result is always zero?

Answer 1

svg <g> elements don't have explicit height and width attributes, they auto size to whatever they contain. You can get their actual height/width by calling getBBox on the element though:

var height = document.getElementById("myGroup").getBBox().height; 

If you're really into jquery you could write it as

$('g#myGroup').get(0).getBBox().height; 

according to Reed Spool

Answer 2

I wasn't able to get any of the answers above to work, but did come across this solution for finding it with d3:

var height = d3.select('#myGroup').select('svg').node().getBBox().height; var width = d3.select('#myGroup').select('svg').node().getBBox().width; 

getBBox() here will find the actual width and height of the group element. Easy as that.