Как получить размеры элемента SVG в FireFox?

В большинстве браузеров будет работать следующее.

window.onload = function(){
    console.log( document.getElementById('svgElm').getBoundingClientRect().width );
};

Вот демон . Если вы попробуете его в Google Chrome, консоль выведет 200. Однако FireFox возвращает 0.

Ответы

Ответ 1

Я вернусь к родительским размерам, если свойства SVG не могут быть возвращены. Ниже приведена демонстрация http://jsbin.com/uzoyik/1/edit.

Относительный код:

svg.clientWidth || svg.parentNode.clientWidth
svg.clientHeight || svg.parentNode.clientHeight

Ответ 2

Я не думаю, что "ширина" является стандартным кроссбраузерным свойством объекта, возвращаемого методом getBoundingClientRect. Обычно я делаю что-то вроде:

var box = el.getBoundingClientRect();
var width = box.right-box.left;
var height = box.bottom-box.top;

Ответ 3

Эта ошибка Firefox была исправлена в Firefox 33, которая была выпущена 14 октября 2014 года.

Подробнее см. ошибка 530985.

Ответ 4

Решение, которое я нашел для этого, заключалось в использовании .getComputedStyle(). А поскольку элементы svg не поддерживаются в старых браузерах IE8, .getComputedStyle() - это способ дать согласованные результаты.

Итак, я использовал эту функцию в своей библиотеке:

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