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

为了扩展Robert的评论，SVG getBBox()方法 - svg.js将在bbox()的引擎下使用 - 返回元素的边界框。但是它忽略了该元素上的任何transform。

要在转换后获得边界框，您需要将该元素包装在一个组中，然后在其上调用getBBox()（bbox()）。

在您的情况下，您已经将路径包装在一个组中。但你所称的group实际上是路径，而不是群体。

尝试这样的事情：

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

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

＆＃13;

＆＃13;

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

＆＃13;

path {
  fill: #f06;
}

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

＆＃13;

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

<div id="elementId"></div>

＆＃13;

＆＃13;

＆＃13;