Obtenir la largeur/hauteur de l'élément SVG

Question

Quelle est la bonne façon d'obtenir les dimensions d'un svg élément ?

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"

Il existe des propriétés de largeur et de hauteur sur svg1 mais .width.baseVal.value n'est défini que si j'ai défini les attributs width et height sur l'élément.

---

Le violon ressemble à ceci :

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

Utiliser la fonction 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);

Answer 2

FireFox a des problèmes pour getBBox(), j'ai besoin de le faire dans vanillaJS.

J'ai un meilleur moyen et c'est le même résultat que la fonction svg.getBBox() réelle !

Avec ce bon poste : Obtenir la taille réelle d'un élément 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 3

J'utilise Firefox, et ma solution de travail est très proche de celle d'obysky. La seule différence est que la méthode que vous appelez dans un élément svg renvoie plusieurs rectangles et vous devez sélectionner le premier.

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

Answer 4

SVG a des propriétés width y height . Ils renvoient un objet SVGAnimatedLength avec deux propriétés : animVal y baseVal . Cette interface est utilisée pour l'animation, où baseVal est la valeur antes de animation. D'après ce que je peux voir, cette méthode renvoie des valeurs cohérentes dans Chrome et Firefox, donc je pense qu'elle peut aussi être utilisée pour obtenir la taille calculée d'un SVG.

Answer 5

C'est le moyen le plus cohérent de croiser les navigateurs que j'ai trouvé :

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