Manipulate SVG viewbox with JavaScript (no libraries)

javascript svg viewbox
Andrew Clear picture Andrew Clear · Apr 10, 2012 · Viewed 39.4k times · Source

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.

Answer

Anthony picture Anthony · Apr 10, 2012

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?

Related questions

How to use viewbox when height of svg is dynamically changing

I have a resizable div. It has two inner divs. One of the inner divs has an svg element in it. In the svg element I am adding and removing the content dynamically such that each time I add something …

Read More
Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More