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

À partir de Firefox 33, vous pouvez appeler getBoundingClientRect() et il fonctionnera normalement, c'est-à-dire que dans la question ci-dessus, il renverra 300 x 100.

Firefox 33 sera publié le 14 octobre 2014, mais le correctif est déjà en place. Firefox nightlies si vous voulez l'essayer.

Answer 2

Une méthode de sauvegarde pour déterminer l'unité de largeur et de hauteur de tout (sans remplissage, sans marge) est le suivant :

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

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

Answer 3

Utilisez .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>