將SVG元素的大小調整為其內容

Question

我想將SVG-Element的尺寸調整為其內容。

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

我在這里舉個例子。 SVG應該“收縮”以適應每側的元素+ 10px邊距。 換句話說：我想為未使用的空間裁剪svg ...

我知道我必須使用getBBox 。 但是如何計算總寬度和高度？

Answer 1

默認情況下，SVG繪圖的原點與容器的原點相同。 這意味着圖形的(0,0)位於SVG元素的左上角。 要使內容居中，您應該將繪圖相對於容器進行轉換。 可以通過相對於getBBox()方法的結果修改SVG元素的viewBox屬性（預期的四個值： "minx miny width height" ）來實現。 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");

Answer 2

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