Obtener ancho/alto del elemento SVG

¿Cuál es la forma correcta de obtener las dimensiones de un svg ¿elemento?

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

cromo 28:

style x
client 300x100
offset 300x100

IE 10:

stylex 
client300x100 
offsetundefinedxundefined 

Firefox 23:

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

Hay propiedades de ancho y alto en svg1pero .width.baseVal.value solo se establece si configuro los atributos de ancho y alto en el elemento.

El violín se ve así:

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;
}

Utilizar el getBBox función:

los SVGGraphicsElement.getBBox() El método nos permite determinar las coordenadas del rectángulo más pequeño en el que cabe el objeto. […]

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);

FireFox tiene problemas para getBBox(), necesito hacer esto en vanillaJS.

¡Tengo una mejor manera y es el mismo resultado que la función real svg.getBBox()!

Con esta buena publicación: Obtenga el tamaño real de un elemento SVG/G

var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle

console.log( rect.width );
console.log( rect.height);

Estoy usando Firefox y mi solución de trabajo es muy similar a obysky. La única diferencia es que el método al que llame en un elemento svg devolverá varios rects y deberá seleccionar el primero.

var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;

SVG tiene propiedades width y height. Devuelven un objeto SVGAnimatedLength con dos propiedades: animVal y baseVal. Esta interfaz se utiliza para la animación, donde baseVal es el valor antes de animación. Por lo que puedo ver, este método devuelve valores consistentes tanto en Chrome como en Firefox, por lo que creo que también se puede usar para obtener el tamaño calculado de SVG.

Esta es la forma consistente entre navegadores que encontré:

var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
    widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];

var svgCalculateSize = function (el) {

    var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
        bounds = {
            width: 0,
            height: 0
        };

    heightComponents.forEach(function (css) { 
        bounds.height += parseFloat(gCS[css]);
    });
    widthComponents.forEach(function (css) {
        bounds.width += parseFloat(gCS[css]);
    });
    return bounds;
};

Desde Firefox 33 en adelante, puede llamar a getBoundingClientRect() y funcionará normalmente, es decir, en la pregunta anterior devolverá 300 x 100.

Firefox 33 se lanzará el 14 de octubre de 2014, pero la solución ya está disponible Noches de Firefox si quieres probarlo.

¡Usa .getAttribute()!

var height = document.getElementById('rect').getAttribute("height");
var width = document.getElementById('rect').getAttribute("width");
var x = document.getElementById('rect').getAttribute("x");
alert("height: " + height + ", width: " + width + ", x: " + x);

<svg width="500" height="500">
  <rect width="300" height="100" x="50" y="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" id="rect"/>
</svg>