Рассчитать размеры элемента SVG

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

var svg = document.querySelector('svg');
var gBCR = svg.getBoundingClientRect().width;
var bBox = svg.getBBox().width;
var gCS = window.getComputedStyle(svg, null).width;
console.log('gBCR: ' + Math.round(gBCR) + ' - gCS: ' + gCS + ' - bBox: ' + Math.round(bBox));

// What I got:
// Firefox: gBCR: 142 - gCS: 400px - bBox: 363
// Chrome:  gBCR: 400 - gCS: 400px - bBox: 363

http://jsfiddle.net/23x8S/

Мой элемент svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="200px">
    <title>HTML5 Logo</title>
    <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512" />
    <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894             " />
    <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627" />
    <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399" />
    <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z" />
    <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z" />
    <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z" />
    <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z" />
    <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217" />
    <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305" />
<svg>

javascript svg html
person Sergio    schedule 19.05.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ваш подход кажется правильным. Он дает правильную ширину в обоих случаях, проблема в том, что компонент SVG отображается по-разному в Firefox и Chrome, в Chrome используется 100% доступной ширины, а в Firefox используется минимальная ширина для отображения содержимого.

Этот трекер объясняет, почему Firefox не использует «100%» в качестве ширины по умолчанию: https://bugzilla.mozilla.org/show_bug.cgi?id=611099

person Roberto    schedule 19.05.2014
comment
Роберто, спасибо, что проверил это. Что было бы правильным способом получить то же самое число из этого? Если я заставлю ширину элемента SVG быть width="400px", проблема все еще существует, теперь пропорционально первой: jsfiddle.net/2zn32/1 - person Sergio; 19.05.2014
comment
Не только 100% ширины, но и 100% высоты. Фиксация ширины и высоты (соотношение сторон соответствует размерам области просмотра): jsfiddle.net/abhitalks/WDQ6X/2 - person Abhitalks; 19.05.2014
comment
@Sergio, если вы можете использовать jQuery, использование $('svg').width() возвращает 400 в Firefox и Chrome. - person Roberto; 19.05.2014
comment
@ Роберто, это был хороший указатель. jQuery использует .getComputedStyle. Обновлена ​​ширина моего вопроса этой информации. Теперь просто нужно найти способ получить стабильные результаты в старых браузерах. Кстати, только что протестировал IE8, и jQuery возвращает 0 там... - person Sergio; 19.05.2014
comment
Поддерживает ли IE8 SVG? stackoverflow.com/questions/6097179/, у вас получается правильно отображать логотип?, к сожалению, у меня нет браузера IE8, чтобы проверить его. - person Roberto; 19.05.2014