Obtener el ancho / alto del elemento SVG

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

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"

Hay propiedades de ancho y alto activadas svg1, pero .width.baseVal.valuesolo se establecen 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;
}

Usar la función getBBox

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 svg.getBBox () real!

Con esta buena publicación: Obtén 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 está muy cerca de obysky. La única diferencia es que el método al que llama en un elemento svg devolverá múltiples rects y debe seleccionar el primero.

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

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

Esta es la forma coherente 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 en Firefox nightlies si quieres probarlo.

Un método de guardado para determinar la unidad de ancho y alto de cualquier elemento (sin relleno, sin margen) es el siguiente:

let div   = document.querySelector("div");
let style = getComputedStyle(div);

let width  = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));