如何计算SVG图像的固有尺寸？

的IDL属性naturalWidth和naturalHeight必须返回图像的固有宽度和高度，以CSS像素，如果图像是可用的，否则为0。

这是清楚JPG，PNG，GIF的固有宽度和高度是如何计算的 - 它们在px中都有固定的尺寸。但我无法找到这些维度是如何计算SVG图像的。

我做任意SVG图像的实验和它在不同的浏览器将返回不同的值：

铬 - 137×150
火狐 - 0 X 0
的Safari - 返回的尺寸DOM元素而不是固有尺寸

那么是否有任何规范定义它应该如何表现？为什么Chrome会返回这些值？我可以理解在Safari和Firefox中实施的行为，但Chrome正在做一些有趣的事情。

const width = document.getElementById('img').naturalWidth; 
 
const height = document.getElementById('img').naturalHeight; 
 

 
document.getElementById('result').innerText = `Width: ${width}\nHeight: ${height}`;

<img id="img" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"> 
 
<div id="result"></div>

来源

2017-07-26 Yaroslav Admin

我相信，Chrome浏览器，如果你嵌入的东西，其大小不能制定出将被给出的值开始。这些值是300 x 150px。

然后，它看起来像它的应用从视框宽高比到150像素的宽度，以产生150一个新的高度×一百○五分之九十六= 137.142px我想这四舍五入到137px

来源

2017-07-26 17:04:26

如何计算SVG图像的固有尺寸？

回答

相关问题