Breite / Höhe des SVG-Elements abrufen

84

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

Antworten:

102

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);
Pavel Gruba
quelle
9
Gibt es keine Möglichkeit, es wie ein HTML-Element zu behandeln und die tatsächliche Größe des svgElements zu ermitteln, obwohl es gezeichnet wurde? jsfiddle.net/Xkv3X/4
Langdon
3
Übrigens versuche ich, die Größe der Leinwand zu bestimmen, auf die ich zeichnen kann, bevor ich Formen rendere.
Langdon
1
Ich denke, es könnte besser sein, die verfügbare Größe des Containers (das Div, das Ihre SVG enthält) zu überprüfen, als Sie die entsprechende Größe für Ihre SVG einstellen können
Pavel Gruba
1
@ Langdon, das wurde gerade in Firefox behoben. Firefox 33 meldet etwas Ähnliches wie Chrome.
Robert Longson
2
Heute habe ich ein Problem mit getBoundingClientRect für FireFox 38 gemeldet, wenn Symbol / Verwendung verwendet werden. In diesem Fall erweitert getBoundingClientRect das Element bis zum Rand von viewBox. Es gibt auch ein bekanntes Problem bezüglich der Strichbreite. GetBoundingClientRect ist daher derzeit keine browserübergreifende Lösung.
Dzenly
48

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);
obysky
quelle
dieses ! Wie gesagt, Firefox hat Probleme, aber das funktioniert in den meisten Browsern :)
thatOneGuy
1
Gibt Null zurück, wenn das SVG ausgeblendet ist (z. B. auf der Registerkarte "Bootstrap")
Alexey Sh.
caniuse.com/#feat=getboundingclientrect - alles sieht jetzt in Ordnung aus, FF12 +, Chrome 4+
marksyzm
8

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;
Cichelero
quelle
Auf diese Weise können Sie die Größe ermitteln, bevor CSS transformangewendet wird.
Marko
7

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.

afkatja
quelle
wo svg dein Element ist ... lass svgWidth = svg.width.baseVal.value; let svgHeight = svg.height.baseVal.value;
Bob
Leider funktioniert dies unter Firefox im Moment nicht - es gibt Ihnen einen Anfangswert, aber wenn Sie die SVG-Dimensionen ändern und es erneut versuchen, erhalten Sie den ursprünglichen Wert.
Bob
3

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

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.

Robert Longson
quelle
-2

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", ""));
Martin Wantke
quelle