Get szerokość/wysokość SVG elementu

Question

Co to jest właściwy sposób, aby uzyskać wymiary elementu svg?

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

Chrom 28:

style x 
client 300x100 
offset 300x100 

IE 10:

stylex 
client300x100 
offsetundefinedxundefined 

FireFox 23:

ma szerokość i wysokość właściwości w svg1, ale .width.baseVal.value jest ustawiany tylko wtedy, gdy ustawię atrybuty width i height na elemencie.

---

skrzypcach wygląda następująco:

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

Zastosowanie getBBox funkcja

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

Jest to zgodne sposób cross-browser znalazłem:

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 mieć Problèmes dla getBBox(), muszę zrobić to w vanillaJS.

mam lepszy sposób i jest taki sam wynik jak prawdziwy svg.getBBox function()!

Z tej dobrej postu: 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

Od Firefox 33 roku można nazwać getBoundingClientRect() i będzie działać normalnie, czyli w pytaniu powyżej niej powróci 300 x 100.

Firefoksa 33 zostanie wydany 14 października 2014 r., Ale poprawka jest już dostępna pod numerem Firefox nightlies, jeśli chcesz ją wypróbować.

Answer 5

SVG ma właściwości width i height. Wracają obiekt SVGAnimatedLength z dwóch właściwości: animVal i baseVal. Ten interfejs jest używany do animacji, gdzie baseVal jest wartością przed animacji. Z tego, co widzę, ta metoda zwraca spójne wartości zarówno w Chrome, jak i Firefoksie, więc myślę, że może być również wykorzystana do uzyskania obliczonego rozmiaru SVG.

Answer 6

Używam Firefoksa, a moje działające rozwiązanie jest bardzo obscurcze. Jedyna różnica polega na tym, że metoda, którą wywołujesz w elemencie svg, zwróci kilka rectów i musisz wybrać pierwszą.

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