Breite / Höhe des SVG-Elements abrufen

Was ist der richtige Weg, um die Abmessungen eines svgElements zu erhalten?

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"

Es gibt Eigenschaften für Breite und Höhe svg1, die jedoch .width.baseVal.valuenur festgelegt werden, wenn ich die Attribute Breite und Höhe für das Element festgelegt habe.

Die Geige sieht so 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;
}

Verwenden Sie die Funktion 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);

FireFox hat Probleme mit getBBox (), ich muss dies in vanillaJS tun.

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

Mit diesem guten Beitrag: Ermitteln Sie die tatsächliche Größe eines SVG / G-Elements

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

Ich verwende Firefox und meine Arbeitslösung kommt Obysky sehr nahe. Der einzige Unterschied besteht darin, dass die Methode, die Sie in einem svg-Element aufrufen, mehrere Rechtecke 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;

SVG hat Eigenschaften widthund height. Sie geben ein Objekt SVGAnimatedLengthmit zwei Eigenschaften zurück: animValund baseVal. Diese Schnittstelle wird für die Animation verwendet, wobei baseValder Wert vor der Animation ist. Soweit ich sehen kann, gibt diese Methode sowohl in Chrome als auch in Firefox konsistente Werte zurück. Ich denke, sie kann auch verwendet werden, um die berechnete Größe von SVG zu erhalten.

Dies ist die konsistente browserübergreifende Methode, die ich gefunden habe:

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

Ab Firefox 33 können Sie getBoundingClientRect () aufrufen und es funktioniert normal, dh in der obigen Frage wird 300 x 100 zurückgegeben.

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

Eine Methode speichert die Breite und Höhe der Einheit zu bestimmen jedes Elements (keine Polsterung, keine Marge) ist die folgende:

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

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