Question

我们的系统通过AJAX以编程方式将SVG文件加载到HTML中。典型的SVG文件以：

开头

 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm'  width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink

但奇怪的是，在JavaScript中似乎无法从SVG DOM中获取此“viewBox” - 无论是作为字符串还是作为一组值。例如，在Mozilla下，firebug报告svg节点有我们指定的6个属性中的5个 - 即：xmlns，xml：space，height，width和xmlns：xlink。但是此列表中明显缺少 ViewBox 。

无论如何以编程方式检索此值？ - 它在SVG DOM中的位置？（我们不能介绍第三方图书馆。）

Answer 1

转到http://phrogz.net/SVG/svg_in_xhtml5.xhtml
打开网络浏览器控制台

输入代码：

var svg = document.querySelector('svg');
var box = svg.getAttribute('viewBox');
box.split(/\s+|,/);

观察光荣的回应：
```
["-350", "-250", "700", "500"]
```

或者，输入代码：

var box = svg.viewBox.baseVal;
[ box.x, box.y, box.width, box.height ]

观察光荣的回应：
```
[ -350, -250, 700, 500 ]
```

换句话说：是的，您可以从DOM获取viewBox，包括standard DOM 2 attribute 和explicit ECMASCript binding。

Answer 2

您需要查看SVGFitToViewBox接口，该接口指定viewBox属性。 svg元素的接口SVGSVGElement扩展了该接口，因此可能是您正在寻找的属性。

Answer 3

更容易的是，在您的svg中输入一个ID，然后：

document.getElementById（“ your_id”）。getAttribute（“ viewBox”）;

Answer 4

上面的食谱给了我x，y，width和height viewBox属性的全零-除非其中至少一个以编程方式更改。

我终于成功了

var width = document.getElementById("mysvg").getAttribute("width");

通过javascript获取原始SVG viewBox

4 个答案: