使用JavaScript操作SVG视图框（无库）

Question

我正在尝试在JavaScript中更改SVG元素视图框。基本上，我正在绘制一个二叉搜索树，当它变得太宽时，我想改变视图框以缩小，以便树适合窗口。我目前正在使用：

if(SVGWidth>=1000){
  var a = document.getElementById('svgArea');
  a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}

HTML是：

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

我也尝试过使用setAttributeNS（'null'，...），但这似乎也没有用。我注意到的一件奇怪的事情是，当我发出警报时（a）它给出[对象SVGSVGElement]这看起来很奇怪。任何帮助表示赞赏。

Answer 1

很高兴看到svg的上下文，但以下内容对我来说是一个纯SVG文档：

shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-250 -250 500 750"); 

也许是因为viewBox区分大小写？

Answer 2

您的代码中有错误：＆＃34; viewbox＆＃34;不同于＆＃34; viewBox＆＃34; ... B是大写的。将代码更改为：

a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");