使用JavaScript处理SVG视框（无库）

我试图在JavaScript中更改SVG元素视框。基本上，我绘制了一个二叉搜索树，当它变得太宽时，我想要改变视框来缩小视图，以使树适合窗口。我目前使用：使用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试过（ '空'，...），但似乎没有任何工作。我注意到的一件奇怪的事情是，当我提醒（a）它给出[object SVGSVGElement]时，这看起来很奇怪。任何帮助表示赞赏。

我可以知道你为什么不想使用库吗？ – 2012-04-10 08:01:29

我应该添加，SVGWidth可能是一个不好的变量名称，应该只是treeWidth。另外，SVG的html是： 2012-04-10 08:01:38

我没有使用库，因为我专注于学习JavaScript。我将在图书馆添加下一个项目，但我认为最好从本机JavaScript开始。 – 2012-04-10 08:02:51

这将是很好看的SVG的背景下，但与纯SVG文件中，以下为我工作：

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

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

2012-04-10 08:05:17 Anthony

+15

区分大小写。叹息...... – 2012-04-10 08:08:11

用这种方式来看，如果它不那么容易，那就更难了。直到现在，我从来没有尝试过实际的svg元素属性，所以我们都想出了一些东西。 – Anthony 2012-04-10 08:11:22

我犯了同样的错误。 – 2013-02-08 22:12:32

您在代码中出现错误：“viewbox”与“viewBox”不同“B”是大写。将代码更改为：

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

2014-10-17 18:05:47 LUISAO

中写了'viewbox'那么我认为现在的答案是回答这个问题。 'b'是它没有工作的原因。但是，user3434597应该首先阅读@ Anthony的旧答案。也许他会删除这一个。 – akauppi 2015-02-12 22:08:37

回答