调整SVG元素的大小以适应其内容

Question

我希望调整SVG元素的尺寸以适应其内容。

JSFiddle: http://jsfiddle.net/4pD9N/ 这里有一个例子。SVG应该“缩小”以适应元素+每侧10像素的边距。 换句话说：我想裁剪未使用的空间...

我知道我必须使用getBBox。但是如何计算总宽度和高度？

- user3142695

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

- user3786597

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

- user3848987