如何計算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圖像的固有尺寸？

回答

相關問題