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

【问题标题】：How intrinsic dimensions are computed for SVG images?如何计算 SVG 图像的内在尺寸？
【发布时间】：2018-01-02 01:08:43
【问题描述】：

HTML 5 specifiction 定义为：

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

很清楚 JPG、PNG、GIF 的固有宽度和高度是如何计算的 - 它们都具有以 px 为单位的固定尺寸。但我找不到 SVG 图像的这些尺寸是如何计算的。

我用任意 SVG 图像做了一个实验，它在不同的浏览器中返回不同的值：

铬 - 137 x 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>

【问题讨论】：

标签： html svg

【解决方案1】：

我相信 Chrome 会从您嵌入无法计算大小的内容时给出的值开始。

这些值为300 x 150px。

然后看起来它正在将 viewBox 的纵横比应用到 150px 宽度以生成 150 x 96 / 105 = 137.142px 的新高度，我猜它四舍五入到 137px

【讨论】：

【解决方案2】：

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

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

【讨论】：