CODEWITHSUNDEEP
javascriptbrowsersvg
ecmanaut
ecmanaut

Reputation: 5150

SVG: getting a precise bounding box of a path?

The SVGPath.getBBox() implementation in at least WebKit seems somewhat shoddy; is there some better (cheaper) way than walking the path (or sampling it over and over at random), manually computing its probable bounding box, to get a good reading?

http://bl.ocks.org/2939938 (or https://gist.github.com/2939938) shows an example of the latter and when I run it in a few different fairly modern browsers, there is notable variation in the native implementation. Opera is best, Firefox good and Chrome / Safari ocular-notably bad:

616.1572 677.0540 127.6856 126.8793 - sampled, gathering random coords for 5s (reference)
616.1569 677.0538 127.6860 126.8796 - opera 11.64 build 1403
616.1563 677.0547 127.6875 126.8789 - firefox aurora 15.0a2 (2012-06-15)
614.2805 673.9761 136.2089 129.9573 - chrome canary 21.0.1176.0
614.2805 673.9761 136.2089 129.9573 - safari 5.1.7 (7534.57.2)

Or, left/top/width/height variation from the reference bounding box in percent:

0.00005% 0.00003% 0.00031% 0.00024% - opera
0.00015% 0.00010% 0.00149% 0.00032% - firefox
0.30458% 0.45460% 6.67522% 2.42593% - chrome
0.30458% 0.45460% 6.67522% 2.42593% - safari

Upvotes: 2

Views: 1998

Answers (1)

ecmanaut
ecmanaut

Reputation: 5150

It turns out Raphael.js implements a rather excellent Raphael.pathBBox, for the case where you have a <path> element specifically; it seems algebraically exact, and is fast. Added to the comparison test page.

Upvotes: 1

Related Questions