kangax/fabric.js — Issue #116: Workaround for imported SVG bounds
Author: zz85
Created: 2012-02-01 08:56:58+00:00
State: open

SVG file for reference is http://en.wikipedia.org/wiki/File:Blank_US_Map.svg

When currently imported, the bounds (for resizing, moving or selecting) each state refers to the entire map bounds rather its own.
If imported correctly, I assume the bounding boxes would work the same as web browser do, selection an object when the mouse is hover above it.

I did a quick and dirty hack around with this code. I suppose that should be a much more elegant approach by editing parser.js?

```javascript
var canvas = new fabric.Canvas('c');

test = fabric.loadSVGFromURL("Blank US Map.svg", function(objects) {

var obj, c=0;

for (var o in objects) {
obj = objects[o];

minx = Number.POSITIVE_INFINITY,
maxx = Number.NEGATIVE_INFINITY,
miny = Number.POSITIVE_INFINITY,
maxy = Number.NEGATIVE_INFINITY;

for (var p in obj.path) {
var a = obj.path[p];

if (a[1]) {
minx = Math.min(minx, a[1]);
maxx = Math.max(maxx, a[1]);
} if (a[2])	{
miny = Math.min(miny, a[2]);
maxy = Math.max(maxy, a[2]);
}
}

canvas.add(obj);

obj.width = maxx - minx;
obj.height = maxy - miny;

for (var p in obj.path) {
var a = obj.path[p];

if (a[1]) {
a[1] -= minx;
} if (a[2])	{
a[2] -= miny;
}
}

obj.left = minx;
obj.top = maxy;

}

canvas.renderAll();

});
```

* this could be related to [issue #72] (https://github.com/kangax/fabric.js/issues/72)