使用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区分大小写？

以这种方式看待它,如果它不那么容易,那就更难了.到目前为止,我从未尝试过使用实际的svg元素属性,因此我们都想出了一些东西. (5认同)
<哭>我犯了同样的错误. (4认同)
对于动态创建的SVG，需要使用“ createElementNS”创建SVG元素，否则设置属性“ viewBox”将不起作用。参考：/sf/ask/2011423991/#28734954 (2认同)

Answer 2

您的代码中有错误:"viewbox"与"viewBox"不同... B是大写的.将代码更改为:

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