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

Posted 2023-03-28

【中文标题】如何在 IE 11 中的 Image.load 上获取 SVG 的宽度和高度

【英文标题】：How can I get width and height of SVG on Image.load in IE 11

【发布时间】：2020-11-09 14:47:32

【问题描述】：

它在任何地方都可以正常工作，但在 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 fails on IE

这些答案中的解决方案均不适用于 svg。

有没有办法在 Internet Explorer 11 中获取使用 Image() 加载的 svg 文件的宽度和高度？

注意：我正在寻找一种无需将元素添加到 DOM 进行测量的解决方案，因为我想避免任何不必要的重排/重绘。

【问题讨论】：

您测试的是哪个版本的 IE？

你可以在它周围包裹一个 div 或其他东西，当它失败时你可以使用父宽度和高度。

@Erwinus 这意味着它必须事先添加到 DOM 中，这并不理想。

我也有同样的需求，但是解决不了。

@san.chez：不知道你打算用它做什么（你的目标是什么），但我认为无论如何你都需要将它添加到 DOM 中。也许它没有被测量，因为它像大多数不可见的 DOM 对象一样不可见。

【参考方案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';

是的 - 这个解决方案并不理想。

【讨论】：

这个解决方案对我有用。使用$.get 的公认解决方案的问题在于，它可能成为 CORS 访问控制标头的受害者。

这是最好的解决方案！谢谢@dimacpp！

【参考方案2】：

在 html5 标准中：

IDL 属性 width 和 height 必须返回图像的渲染宽度和高度，以 CSS 像素为单位，如果图像正在被渲染，并且正在被渲染到视觉媒体；或者图像的固有宽度和高度，以 CSS 像素为单位，如果图像可用但未呈现到视觉媒体；否则为 0，如果图像不可用。 LINK

如果 img 没有呈现，那么 IE 保留显示 0 的权利。而且似乎他正在这样做。

与.naturalWidth 和.naturalHeight 类似的情况。

【讨论】：

根据您发布的文本，如果图像未呈现到可视媒体但可用（= 已加载），则浏览器应返回固有的宽度和高度，而不是零。

【参考方案3】：

好吧，如果 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 内容的引用，并在将其添加到页面之前对其进行更多控制。