Question

我想从JavaScript函数中确定元素的viewBox（即SVGSVGElement）。主叫：

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 spec无法帮助您......

Answer 2

这个问题相当陈旧我知道..但我最近开始在横向浏览器上使用SVG并遇到同样的问题。

鉴于一些SVG文件，其中一些使用viewBox而另一些没有，所以每个浏览器在显示时都会有不同的反应。

关键部分以及我在本网站上找不到的部分是的，可以通过使用来假设viewBox 的DOMParser（）。

这样，丢失的viewBox可以在显示svg之前进行下注。

这是一个简化的示例，但它可能会帮助其他人遇到同样的问题：

//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(' '));

如何从JavaScript确定任何<svg>元素的viewBox？</svg>

2 个答案: