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

Question

我希望能够通过JavaScript函数确定SVG元素（即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>

（括号中的值是函数应在每种情况下返回的内容）。我希望能够在所有支持SVG且在所有缩放级别上都能实现此目标的浏览器中完成此操作。

这里有一个JSFiddle，其中包含一次（失败的）尝试：http://jsfiddle.net/w4BTD/1/

- danvk

---

我最终通过接收一个div并在其中创建自己的SVG元素来解决了这个问题。Divs更容易测量。如果你能够创建自己的SVG元素，你会感到更加愉快！ - danvk

Answer 1

这个问题比较老了，我知道。然而，最近我开始在跨浏览器上使用SVG，并遇到了同样的问题。给定一堆带有viewBox和不带viewBox的SVG文件，每个浏览器在显示它们时都会有些微不同的反应。

关键部分，也是我在这个网站上尚未找到的部分，是可以使用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(' '));

- Lain

---

这确实是一个不错的发现。 - JavaScript

Answer 2

viewbox是用来指定给定一组图形如何适应特定容器元素的属性。当您希望实现这种行为时，应设置此属性。

将属性设置为与SVG元素相同大小可能有点多余（如果您不打算更改它），这样可以使代码变得更小，但是却是不必要甚至错误的。

我会检查viewbox属性是否已设置，如果没有，则询问SVG的大小将与之相同。SVG规范对此无法提供帮助...

- talabes

---

如何“获取 SVG 的大小”？从规范上并不清楚，而诸如 getBoundingClientRect() 这样的方法存在各种跨浏览器兼容性问题。 - danvk

这个链接不起作用吗？ - talabes