Манипулировать SVG viewbox с JavaScript (без библиотек)

Я пытаюсь изменить окно просмотра элементов SVG в JavaScript. В принципе, я рисую двоичное дерево поиска, и когда он становится слишком широким, я хочу изменить окно просмотра, чтобы уменьшить масштаб, чтобы дерево входило в окно. В настоящее время я использую:

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',...), но это тоже не сработало. Одна странная вещь, которую я заметил, это то, что когда я предупреждаю (а), она дает [объект SVGSVGElement], который кажется странным. Любая помощь приветствуется.

Ответы

Ответ 1

Было бы хорошо видеть контекст svg, но следующее работало для меня с чистым документом SVG:

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

Может быть, потому что viewBox чувствителен к регистру?

Ответ 2

У вас есть ошибка в вашем коде: "viewbox" отличается от "viewBox"... B находится в верхнем регистре. Измените код на:

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