我如何確定任何的viewBox <svg> 來自JavaScript的元素？

Question

我想從JavaScript函數確定一個元素（即SVGSVGElement）的viewBox。 致電：

svgElement.getAttribute("viewBox")

在元素上明確設置viewBox時，效果很好。 但是我不能認為情況總是如此。 例如，我希望我的函數可以在所有這些標簽上使用：

(400, 100) <svg width=400 height=100></svg>
(400, 100) <svg width="400px" height="100px"></svg>
(400, 100) <svg style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" style="width: 400px; height: 100px"></svg>
(100,  25) <svg viewBox="0 0 100 25" width=400 height=100></svg>

（parens中的值是函數在每種情況下應返回的值）。 我希望能夠在所有支持SVG和所有縮放級別的瀏覽器中執行此操作。

這是一個嘗試（失敗）的JSFiddle： http : //jsfiddle.net/w4BTD/1/

Answer 1

視圖框將指定一組給定的圖形進行拉伸以適合特定的容器元素。 需要該行為時應設置此屬性。

將屬性設置為svg元素的大小相同會有點多余（如果您永遠都不會更改它），則可以使代碼變小，但是這是不必要的甚至是錯誤的。

我將檢查是否設置了viewbox屬性，如果沒有設置，則要求svg的大小相同。 SVG規范將無法幫助您...

Answer 2

我知道這個問題比較老。.但是我最近開始在跨瀏覽器上使用SVG，遇到了同樣的問題。

給定一堆SVG文件，有些帶有viewBox，有些沒有，每個瀏覽器在顯示它們時的反應都有些不同。

關鍵部分以及我在該站點上尚未找到的部分是，可以通過使用DOMParser（）來假定viewBox。

這樣，可以在顯示svg之前設置缺少的viewBox。

這是一個簡化的示例，但是它可以幫助最終遇到相同問題的其他人：

//Parsing a svg-string ('<svg ...></svg>') to an actual element
var tP = new DOMParser().parseFromString(s, 'image/svg+xml');

//Assuming no errors happened, this is going to be the <svg>
tS = document.importNode(tP.documentElement, true);

//Check for a viewBox attribute
var tV = tS.getAttribute('viewBox');

//If it does not exists, it gets set to the actual document dimensions which are provided by the parser
(!tV) && tS.setAttribute('viewBox', [0, 0, tP.documentElement.attributes.width.value, tP.documentElement.attributes.height.value].join(' '));