Get width/height of SVG element

Question

What is the proper way to get the dimensions of an svg element?

http://jsfiddle.net/langdonx/Xkv3X/

Chrome 28:

style x client 300x100 offset 300x100 

IE 10:

stylex  client300x100  offsetundefinedxundefined  

FireFox 23:

"style" "x" "client" "0x0" "offset" "undefinedxundefined" 

There are width and height properties on svg1, but .width.baseVal.value is only set if I set the width and height attributes on the element.

---

The fiddle looks like this:

HTML

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />     <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" />     <circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" /> </svg> 

JS

var svg1 = document.getElementById('svg1');  console.log(svg1); console.log('style', svg1.style.width + 'x' + svg1.style.height); console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight); console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight); 

CSS

#svg1 {     width: 300px;     height: 100px; } 

Answer 1

Use getBBox function

http://jsfiddle.net/Xkv3X/1/

var bBox = svg1.getBBox(); console.log('XxY', bBox.x + 'x' + bBox.y); console.log('size', bBox.width + 'x' + bBox.height);