Breite/Höhe des SVG-Elements

Question

Wie erhält man die Abmessungen eines Elements svg?

http://jsfiddle.net/langdonx/Xkv3X/

Chrom 28:

style x 
client 300x100 
offset 300x100 

IE 10:

stylex 
client300x100 
offsetundefinedxundefined 

FireFox 23:

Es sind Breite und Höhe Eigenschaften auf svg1, aber .width.baseVal.value wird nur gesetzt, wenn ich die Attribute width und height für das Element festlege.

---

Die Geige sieht wie folgt aus:

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

Verwenden getBBox Funktion

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

Dies ist die konsequente Cross-Browser, wie ich gefunden:

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

FireFox haben problemes für getBBox(), ich brauche um das in vanillaJS zu tun.

Ich habe einen besseren Weg und ist das gleiche Ergebnis wie echte svg.getBBox() -Funktion!

Mit diesem guten Beitrag: Get the real size of a SVG/G element

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 4

Von Firefox 33 ab können Sie anrufen getBoundingClientRect(), und es wird in der Regel arbeiten, also in der Frage darüber zurück 300 x 100.

Firefox 33 wird am 14. Oktober 2014 veröffentlicht, aber das Update ist bereits in Firefox nightlies, wenn Sie es ausprobieren möchten.

Answer 5

SVG hat Eigenschaften width und height. Sie geben ein Objekt SVGAnimatedLength mit zwei Eigenschaften zurück: animVal und baseVal. Diese Schnittstelle wird für die Animation verwendet, wobei baseVal der Wert vor Animation ist. Soweit ich sehen kann, gibt diese Methode konsistente Werte sowohl in Chrome als auch in Firefox zurück und ich denke, sie kann auch verwendet werden, um die berechnete SVG-Größe zu ermitteln.

Answer 6

Ich benutze Firefox, und meine Arbeitslösung ist sehr nah an obysky. Der einzige Unterschied besteht darin, dass die Methode, die Sie in einem SVG-Element aufrufen, mehrere Retrakte zurückgibt und Sie die erste auswählen müssen.

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