Nhận chiều rộng / chiều cao của phần tử SVG

Cách thích hợp để lấy kích thước của một svgphần tử là gì?

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"

Có thuộc tính chiều rộng và chiều cao được bật svg1, nhưng .width.baseVal.valuechỉ được đặt nếu tôi đặt thuộc tính chiều rộng và chiều cao trên phần tử.

Fiddle trông như thế này:

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

Sử dụng hàm 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 có các vấn đề đối với getBBox (), tôi cần thực hiện việc này trong vanillaJS.

Tôi có một cách tốt hơn và kết quả giống như hàm svg.getBBox () thực!

Với bài viết hay này: Nhận kích thước thực của phần tử SVG / G

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

Tôi đang sử dụng Firefox và giải pháp làm việc của tôi rất gần với obysky. Sự khác biệt duy nhất là phương thức bạn gọi trong phần tử svg sẽ trả về nhiều phiên bản và bạn cần chọn cái đầu tiên.

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

SVG có thuộc tính widthvà height. Chúng trả về một đối tượng SVGAnimatedLengthcó hai thuộc tính: animValvà baseVal. Giao diện này được sử dụng cho hoạt ảnh, ở đâu baseVallà giá trị trước hoạt ảnh. Từ những gì tôi có thể thấy, phương pháp này trả về các giá trị nhất quán trong cả Chrome và Firefox, vì vậy tôi nghĩ nó cũng có thể được sử dụng để tính kích thước SVG.

Đây là cách nhất quán trên nhiều trình duyệt mà tôi đã tìm thấy:

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

Từ Firefox 33 trở đi, bạn có thể gọi getBoundsClientRect () và nó sẽ hoạt động bình thường, tức là trong câu hỏi trên nó sẽ trả về 300 x 100.

Firefox 33 sẽ được phát hành vào ngày 14 tháng 10 năm 2014 nhưng bản sửa lỗi đã có trong Firefox nightlies nếu bạn muốn dùng thử.

Phương pháp lưu để xác định đơn vị chiều rộng và chiều cao của bất kỳ phần tử nào (không có phần đệm, không có lề) như sau:

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

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