SVG öğesinin genişliğini / yüksekliğini alın

Bir svgelemanın boyutlarını almanın doğru yolu nedir ?

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"

Üzerinde genişlik ve yükseklik özellikleri vardır svg1, ancak .width.baseVal.valueyalnızca öğede genişlik ve yükseklik özelliklerini ayarlarsam ayarlanır.

Keman şuna benzer:

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

GetBBox işlevini kullanın

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'un getBBox () için sorunları var, bunu vanillaJS'de yapmam gerekiyor.

Daha iyi bir yolum var ve gerçek svg.getBBox () işleviyle aynı sonucu veriyor!

Bu güzel gönderiyle: Bir SVG / G öğesinin gerçek boyutunu öğrenin

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

Firefox kullanıyorum ve çalışma çözümüm obysky'ye çok yakın. Tek fark, bir svg öğesinde çağırdığınız yöntemin birden çok rects döndürmesi ve ilkini seçmeniz gerekmesidir.

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

SVG'nin özellikleri vardır widthve height. SVGAnimatedLengthİki özelliğe sahip bir nesne döndürürler : animValve baseVal. Bu arayüz animasyon için kullanılan baseValdeğerdir önce animasyon. Gördüğüm kadarıyla, bu yöntem hem Chrome hem de Firefox'ta tutarlı değerler döndürüyor, bu yüzden hesaplanan SVG boyutunu elde etmek için de kullanılabileceğini düşünüyorum.

Bu, bulduğum tutarlı tarayıcılar arası yol:

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

Firefox 33'ten itibaren getBoundingClientRect () 'i çağırabilirsiniz ve normal çalışacaktır, yani yukarıdaki soruda 300 x 100 döndürür.

Firefox 33, 14 Ekim 2014'te piyasaya sürülecek, ancak denemek isterseniz düzeltme zaten Firefox gecelerinde .

Herhangi bir öğenin genişlik ve yükseklik birimini (dolgu yok, kenar boşluğu yok) belirlemek için bir kaydetme yöntemi şudur:

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

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