Question

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

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

我已经对任意SVG图像进行了实验，并在不同的浏览器中返回不同的值：

Chrome - 137 x 150
Firefox - 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>

Answer 1

我相信Chrome会从嵌入了无法解决其大小的内容的值开始。

这些值为300 x 150px。

然后看起来它正在将viewBox的宽高比应用到150px宽度，以生成150 x 96/105 = 137.142px的新高度，我猜这个高度为137px

Answer 2

您可以创建一个新的 Image 对象而无需将其放入 DOM。然后图像将具有正确的自然宽度。

var i = new Image();
i.src = document.getElementById('img').src;
i.naturalWidth

如何计算SVG图像的内在尺寸？

2 个答案: