Adjust size of an SVG-element to its content

Question

I would like to adjust the dimensions of a SVG-Element to its content.

JSfiddle: http://jsfiddle.net/4pD9N/

Here I got an example. The SVG s

Answer 1

By default, the origin of the SVG drawing is the same as the origin of the container. It means that the (0,0) of your drawing is in the upper left corner of the SVG element. To center the content, you should translate the drawing relatively to the container. It can be achieved by modifying the viewBox attribute (four values expected : "minx miny width height") of the SVG element with respect to the result of the getBBox() method. A live example at http://jsfiddle.net/3cp3c/.

svg.setAttribute("viewBox", (bbox.x-10)+" "+(bbox.y-10)+" "+(bbox.width+20)+" "+(bbox.height+20));
svg.setAttribute("width", (bbox.width+20)  + "px");
svg.setAttribute("height",(bbox.height+20) + "px");