tag - Manipular viewbox SVG con JavaScript(sin bibliotecas)

svg on img tag

Question

Estoy intentando alterar una vista de elementos SVG en JavaScript. Básicamente, estoy dibujando un árbol de búsqueda binaria, y cuando se vuelve demasiado ancho, quiero modificar la vista para alejar para que el árbol encaje en la ventana. Actualmente estoy usando:

if(SVGWidth>=1000){
var a = document.getElementById(''svgArea'');
a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}

El HTML es:

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

También intenté usar setAttributeNS (''null'', ...) pero eso tampoco pareció funcionar. Una cosa extraña que he notado es que cuando estoy alerta (a) me da [object SVGSVGElement] que me parece extraño. Cualquier ayuda es apreciada.

Answer 1

Sería bueno ver el contexto de svg, pero lo siguiente funcionó para mí con un documento SVG puro:

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

Tal vez es porque viewBox mayúsculas y minúsculas.

Answer 2

Tiene un error en su código: "viewbox" es diferente de "viewBox" ... B está en mayúsculas. Cambiar el código a:

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