通过javascript获取原始SVG viewBox

我们的系统通过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

---

您需要查看指定属性的接口。
svg
元素的接口扩展了该接口，因此该属性在元素对象上可用：

const svgElement=document.getElementById（“示例svg”）；
常量{x，y，宽度，高度}=svgElement.viewBox.baseVal；

去
打开web浏览器控制台
键入代码：

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

var svg=document.querySelector（'svg'）；
var-box=svg.getAttribute（'viewBox'）；
框。拆分（/\s+|，/）；

观察光荣的回应：

[“-350”、“-250”、“700”、“500”]

或者，键入代码：

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


观察光荣的回应：

[-350，-250700500]

换句话说：是的，您可以从DOM中获取viewBox，既可以作为一个视图框，也可以作为一个视图框。
更简单的是，在svg中添加一个id，然后：

document.getElementById("your_id").getAttribute("viewBox");

上面的receipes为x、y、width和height viewBox属性提供了全部零，除非至少有一个是通过编程更改的

我终于成功了

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

这就是我最初尝试的。所以我又试了一次，但是var-box=svg.getAttribute（'viewBox'）；即使svg元素显然是调试器中的正确节点，也会为我获取一个“未定义”节点。其他属性如“高度”可以通过这种方式检索，但不能检索“viewBox”。另一种方法svg.viewBox.baseVal给我一个“0,0,0,0”框。我的问题可能与通过AjaxI加载SVG有关。我也有同样的问题，不涉及Ajax。询问“通过javascript获取原始SVG viewBox”2。请注意这个精彩的回答。@TonyEastwood否您的问题与Ajax无关-看起来更像是您没有定义属性viewBox。没有解决方案吗？只需链接？
svg.viewBox.baseVal.width
即可获得宽度。对于
x
、
y
和
height
我有一个问题，答案对我非常有用。如果能详细了解它为什么被关闭，那就太好了。这里也一样。。。投票重新打开。问题已关闭，因为OP发现他们正在调用viewBox上的removeAttribute。他们写了一个答案说，但它被一个国防部删除了。