使用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

回答