What is the correct way to get a bounding box for several elements? about svg.js HOT 6 CLOSED

That's an excellent idea. I have needed that in the past too. I'll implement something like this in the next release:

var box1 = rect.bbox()
var box2 = circle.bbox()

var box3 = box1.merge(box2)

from svg.js.

Cool, here's what I just threw in as a temporary solution:

var bounds = {
    minX:Number.MAX_VALUE, minY:Number.MAX_VALUE,
    maxX:Number.MIN_VALUE, maxY:Number.MIN_VALUE,
    expandBy: function(box) {
    this.minX = Math.min(this.minX, box.x);
    this.minY = Math.min(this.minY, box.y);
    this.maxX = Math.max(this.maxX, box.x + box.width);
    this.maxY = Math.max(this.maxY, box.y + box.height);
    },
    width: function() { return this.maxX - this.minX; },
    height: function() { return this.maxY - this.minY; }
};

from svg.js.

Oh, one more thing: could you alter SVB.BBox so that it can be created without an element? For instance, I might want each element to keep their original box but still be able to separately create a box object that is the result of merging.

I'd be happy to write it up and submit it if you're interested.

from svg.js.

Yes, I did that already in order to be able to return a new instance so that the original bboxes remain untouched :)

from svg.js.

This has now been implemented:
https://github.com/wout/svg.js#bounding-box

And it is now possible to create an instance of SVG.BBox without passing an element:

var box = new SVG.BBox

from svg.js.

Awesome, thanks for quick response.

from svg.js.