如何在 IE 11 中的 Image.load 上獲取 SVG 的寬度和高度

Question

它在任何地方都可以正常工作，但不適用於 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

這里有一個類似的問題： Getting image width on image load failed on IE

這些答案中的任何解決方案都不適用於 svg。

有沒有辦法在 Internet Explorer 11 中獲取使用 Image() 加載的 svg 文件的寬度和高度？

注意：我正在尋找一種無需將元素添加到 DOM 進行測量的解決方案，因為我想避免任何不必要的重排/重繪。

Answer 1

此代碼適用於 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';

是的 - 這個解決方案並不理想。

Answer 2

好吧，如果 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 內容的引用，並在將其添加到頁面之前對其進行更多控制。

Answer 3

在 html5 標准中：

IDL 屬性 width 和 height 必須返回圖像的渲染寬度和高度，以 CSS 像素為單位，如果圖像正在渲染，並且正在渲染到視覺媒體； 或者圖像的內在寬度和高度，以 CSS 像素為單位，如果圖像可用但沒有被渲染到視覺媒體； 否則為 0，如果圖像不可用。 關聯

如果 img 未呈現，則 IE 保留顯示 0 的權利。看來他正在這樣做。

與 .naturalWidth 和 .naturalHeight 情況類似。