如何在 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