javascript - tag - Obtener ancho/alto del elemento SVG

svg texto html

Question

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

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 en svg1 , pero .width.baseVal.value solo se establece si establezco 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;
}

Answer 1

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á en los nightlies de Firefox si quieres probarlo.

Answer 2

Esta es la forma consistente de navegador cruzado 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;
};

Answer 3

Estoy usando Firefox, y mi solución de trabajo está muy cerca de obysky. La única diferencia es que el método que llame en un elemento svg devolverá varias rectas y deberá seleccionar la primera.

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

Answer 4

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

Tengo una mejor forma y es el mismo resultado que la verdadera función svg.getBox ().

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

Answer 5

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

Answer 6

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

Answer 7

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