Was ist der richtige Weg, um die Abmessungen eines svg
Elements 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.value
nur 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;
}
javascript
svg
Langdon
quelle
quelle
svg
Elements zu ermitteln, obwohl es gezeichnet wurde? jsfiddle.net/Xkv3X/4FireFox 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
quelle
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.
quelle
transform
angewendet wird.SVG hat Eigenschaften
width
undheight
. Sie geben ein ObjektSVGAnimatedLength
mit zwei Eigenschaften zurück:animVal
undbaseVal
. Diese Schnittstelle wird für die Animation verwendet, wobeibaseVal
der 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.quelle
Dies ist die konsistente browserübergreifende Methode, die ich gefunden habe:
quelle
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.
quelle
Eine Methode speichert die Breite und Höhe der Einheit zu bestimmen jedes Elements (keine Polsterung, keine Marge) ist die folgende:
quelle