svg.js bbox()在比例尺()之后返回相同的值

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

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>