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

Posted

技术标签:

【中文标题】如何在 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 内容的引用,并在将其添加到页面之前对其进行更多控制。

【讨论】:

以上是关于如何在 IE 11 中的 Image.load 上获取 SVG 的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

python中的image.load_img错误,Keras

IE11 中的 css 计算错误

Windows / IE11 中的范围元素上的 getBoundingClientRect 不正确

在行中包含大图像时,如何使 IE 11 尊重表格中的列宽?

Internet Explorer 中的 SVG 太小

在页面上使用 HTML Editor Extender 回发导致 IE11 中的 JavaScript 错误