Как получить ширину и высоту SVG на Image.load в IE 11

Он отлично работает везде, но не в IE 11 (я еще не тестировал другие версии IE).

var img = new Image();
img.onload = function(){

   alert( 'img: ' + img.width + 'x' + img.height + 
          '  natural: ' + img.naturalWidth + 'x' + img.naturalHeight );

};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';

JSFiddle: JSFiddle

Результат:

img: 121x30 natural: 121x30 - Реальные браузеры (Chrome, Safari, Firefox,...)

img: 0x0 natural: 0x0 - IE 11

Здесь есть аналогичный вопрос: Невозможность получения ширины изображения при загрузке изображения в IE

Ни одно из решений этих ответов не работает для svg.

Есть ли способ получить ширину и высоту файла svg, загруженного с помощью Image() в Internet Explorer 11?

Примечание. Я ищу решение без необходимости добавления элемента в DOM для измерения, поскольку я хочу избежать ненужного повторного потока/перерисовки.

Ответ 1

Ну, я не думаю, что вы можете получить доступ к содержимому SVG, если он загружен как атрибут src, а не встроен.

Одним из решений может быть изменение способа загрузки SVG, поэтому, возможно, загрузить через AJAX, а затем добавить к документу другим способом. Это дает вам возможность получить полный доступ к источнику SVG перед добавлением в документ...

/* use ajax (and in this example jQuery) to get SVG as XML */
$.get('http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg', function(svgxml){

    /* now with access to the source of the SVG, lookup the values you want... */
    var attrs = svgxml.documentElement.attributes;
    alert( 'img: ' + attrs.width.value + 'x' + attrs.height.value );

    /* do something with the svg, like add it to the document for example... */
    $(document.body).append(document.importNode(svgxml.documentElement,true));

}, "xml");

JSFiddle

В этом примере используется jQuery и загружается содержимое SVG в виде xml, но вы можете сделать это по-разному, следуя тому же принципу, например, загружать как текстовую строку и получать доступ с помощью обычных методов jQuery или без jQuery в все.

Мораль этой истории состоит в том, что если вы загружаете ее через AJAX, вы можете получить ссылку на содержимое SVG и получить больше контроля над ней, прежде чем она будет добавлена на страницу.

Ответ 2

Этот код работает в IE11:

var img = new Image();
img.onload = function(){
    document.body.appendChild(this);
    alert( 'img: ' + this.offsetWidth + 'x' + this.offsetHeight);
    document.body.removeChild(this);
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';

И да - это решение не идеально.

Ответ 3

В стандарте html5:

Ширина и высота атрибута IDL должны возвращать визуализированную ширину и высоту изображения, в пикселях CSS, если изображение визуализируется и визуализируется визуальным средой; или же внутренняя ширина и высота изображения в пикселях CSS, если изображение доступно, но не отображается визуальному средству; или 0, если изображение недоступно. ССЫЛКА

Если img не отображается, IE оставляет за собой право отображать 0. И кажется, что он это делает.

С .naturalWidth и .naturalHeight подобная ситуация.