svg.js bbox() returns 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() 的幕后使用 - returns 元素的边界框.但它忽略了该元素上的任何 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>

svg.js bbox() returns scale() 后的相同值

svg.js bbox() returns the same values after scale()

javascript

svg

svg.js