Question

我想将SVG-Element的尺寸调整为其内容。

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

我在这里得到一个例子。 SVG应该缩小＆＃39;适合每边的元素+ 10px边距。换句话说：我想裁剪未使用空间的svg ......

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

Answer 1

默认情况下，SVG绘图的原点与容器的原点相同。这意味着您的绘图的(0,0)位于SVG元素的左上角。要使内容居中，您应该将绘图相对于容器进行转换。可以通过相对于viewBox方法的结果修改SVG元素的"minx miny width height"属性（预期的四个值：getBBox()）来实现。 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(" ") );

将SVG元素的大小调整为其内容

2 个答案: