Управление 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], который кажется странный. Любая помощь приветствуется.

26
javascript svg viewbox

2 ответов

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

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

может быть, это потому, что viewBox регистр?

49

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

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