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 function call not calculating updated position, height and width

Answer 1

To expand on Robert's comments, the SVG getBBox() method - which svg.js will be using under the hood of bbox() - returns the bounding box of the element. But it disregards any transform on that element.

To get the bounding box after the transform, you would need to wrap the element in a group, and call getBBox() ( bbox() ) on that.

In your case, you are already wrapping the path in a group. But the thing you are calling group is actually the path, not the group.

Try something like this:

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>