Manipulate SVG viewbox with JavaScript (no libraries)

Question

I'm trying to alter an SVG elements viewbox in JavaScript. Basically, I'm drawing a binary search tree, and when it gets too wide, I want to alter the viewbox to zoom out so that the tree fits in the window. I'm currently using:

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

The HTML is:

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

I've also tried using setAttributeNS('null',...) but that didn't seem to work either. One strange thing I've noticed is that when I alert(a) it gives [object SVGSVGElement] which seems strange. Any help is appreciated.

Solution 1

It would be good to see the context of the svg, but the following worked for me with a pure SVG document:

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

Maybe it's because viewBox is case-sensitive?

Solution 2

You have an error in your code: "viewbox" is different than "viewBox"...B is in uppercase. Change the code to:

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

Comments

[Rene Pot]

may I know why you don't want to use libraries?

[Andrew Clear]

I should have added, SVGWidth is probably a bad variable name, should just be treeWidth. Also, the html for the SVG is: <svg id="svgArea" xmlns="w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink" width="1000" height="300" viewBox="0 0 1000 300">

[Andrew Clear]

I'm not using libraries because I'm focusing on learning JavaScript. My next project I'll add in libraries, but I thought it would be best to start with native JavaScript.

[Ashith]

@aclear16 : Probably using a library to achieve this would be frustrating, since it should work and since it would only limit the OP's general understanding of DOM manipulation (and thus they would be at the mercy of the library). While we shouldn't be expected to understand things down to the assembly level, it's always helpful to understand how something you are already working within actually works rather than rely on libraries.

[Ashith]

Look at it this way, if it hadn't been that easy, it would have been harder. And I never tried messing with the actual svg element attributes until now, so we both figured something out.

[Joseph Jaquinta]

<cries> I made the same mistake.

[akauppi]

Well, I think the way the answer now is does answer the question. The 'b' was the reason it didn't work. However, user3434597 should have read @Anthony's older answer first. Maybe he'll remove this one.

[Benjamin Intal]

For dynamically created SVGs, the SVG element would need to be created using createElementNS or else setting the attribute viewBox would not work. Reference: stackoverflow.com/questions/28734628/…

[Eric]

More precisely, the DOM SVG object has only viewBox attribute. is has no viewbox attribute, even though you write viewbox in the HTML

[Charles L.]

I believe that this should be setAttributeNs(null, "viewBox", ...) and that setAttribute happens to work, but may not work in the future. Please correct me if I am mistaken, since I am not 100% sure on this.

[Ashith]

@CharlesL. - I think you are correct. I said as much myself on another answer: stackoverflow.com/questions/10546135/…

[Code4R7]

I can confirm that viewBox is case sensitive.