javascript - 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() 的底层使用该方法)返回以下边界框:元素。但它会忽略该元素上的任何转换。

要在转换之后获取边界框，您需要将元素包装在一个组中，然后调用 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>