javascript - Adjust size of an SVG-element to its content - Stack Overflow

admin管理员组

文章数量:1202830

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

JSfiddle: /

Here I got an example. The SVG should 'shrink' to fit to the elements + 10px margin on each side. In other words: I want to crop the svg for the unused space...

I know that I have to use getBBox. But how can I calculate the total width and height?

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 should 'shrink' to fit to the elements + 10px margin on each side. In other words: I want to crop the svg for the unused space...

I know that I have to use getBBox. But how can I calculate the total width and height?

• javascript
• jquery
• svg

Share Improve this question Follow edited Jul 17, 2014 at 12:17 user3142695 asked Jul 17, 2014 at 11:47 user3142695user3142695 17.3k5555 gold badges194194 silver badges373373 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 15

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");

var svg = document.getElementsByTagName("svg")[0];
var bb=svg.getBBox();
var bbx=bb.x;
var bby=bb.y;
var bbw=bb.width;
var bbh=bb.height;
var vb=[bbx,bby,bbw,bbh];
svg.setAttribute("viewBox", vb.join(" ") );

本文标签： javascriptAdjust size of an SVGelement to its contentStack Overflow