Menu
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.
566
Changing Attribute Values Once you have obtained a reference to the SVG element you can change its attributes using the setAttribute() function. Here is an example: var svgElement = document. getElementById("rect1"); svgElement.
viewbox is like a second set of virtual coordinates – all vectors inside the SVG will use the viewbox, while you can manipulate the actual height, width properties of the SVG without affecting the inside,. An SVG with a viewBox is so much easier to work with. I would never put an SVG together without one.
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Attribute Values: min-x: It is used to set the horizontal axis.
The viewport is the visible area of the SVG image. An SVG image can logically be as wide and high as you want, but only a certain part of the image can be visible at a time. The area that is visible is called the viewport. You specify the size of the viewport using the width and height attributes of the <svg> element.
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?
155
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"); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
