web-dev-qa-db-ja.com

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（ 'null'、...）を使用してみましたが、それも機能していないようです。私が気づいた奇妙なことの1つは、alert（a）を実行すると[object SVGSVGElement]が表示され、それが奇妙に見えることです。どんな助けも大歓迎です。

javascriptsvgviewbox
32
Andrew Clear

Svgのコンテキストを見るのは良いことですが、純粋なSVGドキュメントで次のことがうまくいきました。

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

おそらくviewBoxが大文字と小文字を区別するためでしょうか？

65
Anthony

コードにエラーがあります。「viewbox」は「viewBox」とは異なります... Bは大文字です。コードを次のように変更します。

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