svg.js bbox（）在scale（）之后返回相同的值

Question

var SVGElement = SVG('elementId');
var group = SVGElement.group().path('M50,49.67a18.5,18.5,0,1,0-18.5-18.5A18.52,18.52,0,0,0,50,49.67Zm0-31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,50,18.67Z')

bbox_beforeScale = group.bbox()
group.scale(2)
bbox_afterScale = group.bbox()

bbox_beforeScale == bbox_afterScale // true

BBox函數調用未計算更新的位置，高度和寬度

Answer 1

為了擴展羅伯特的評論，SVG getBBox()方法-svg.js將在bbox()的bbox()使用-返回元素的邊界框。 但是它忽略了對該元素的任何transform 。

要在轉換后獲得邊界框，您需要將元素包裝在一個組中，然后在該組上調用getBBox() （ bbox() ）。

就您而言，您已經將路徑包裝在一個組中。 但是，您所說的group實際上是路徑，而不是組。

嘗試這樣的事情：

var group = SVGElement.group();
var path = group.path(..);

bbox_beforeScale = group.bbox();
path.scale(2);
bbox_afterScale = group.bbox();

 var SVGElement = SVG('elementId'); var group = SVGElement.group(); var path = group.path('M50,49.67a18.5,18.5,0,1,0-18.5-18.5A18.52,18.52,0,0,0,50,49.67Zm0-31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,50,18.67Z'); bbox_beforeScale = group.bbox(); path.scale(2); bbox_afterScale = group.bbox(); // draw bbox SVGElement.rect(bbox_afterScale.width, bbox_afterScale.height).addClass('box').move(bbox_afterScale.x, bbox_afterScale.y); 

 path { fill: #f06; } .box { fill: none; strokeWidth: 1; stroke: green; } 

 <script src="https://cdn.rawgit.com/svgdotjs/svg.js/master/dist/svg.min.js"></script> <div id="elementId"></div>