web-dev-qa-db-fra.com

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

Quelle est la bonne façon d'obtenir les dimensions d'un élément 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"

Il y a des propriétés width et height sur svg1, mais .width.baseVal.value n'est défini que si je définis les attributs width et height de 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;
}
javascriptsvg
68
Langdon

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);
79
Pavel Gruba

FireFox a des problèmes pour getBBox (), je dois le faire dans vanillaJS.

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

Avec ce bon article: 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);
38
obysky

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

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

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

6
afkatja

À partir de Firefox 33, vous pouvez appeler getBoundingClientRect () et cela fonctionnera normalement, c'est-à-dire que dans la question ci-dessus, le résultat sera 300 x 100.

Firefox 33 sera publié le 14 octobre 2014 mais le correctif est déjà dans Nightlies Firefox si vous voulez l'essayer.

3
Robert Longson

C'est la façon cohérente de naviguer entre les navigateurs que j'ai trouvée:

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