<title>Testing the native precision SVGPath.getBBox()</title>
pre { text-align: center; }svg { position: absolute; }body { width: 960px; height: 500px; }<svg viewBox="614.2805 673.9761 136.2089 129.9573" width="960" height="500"
style="position: absolute;" fill="rgba(0,0,0,.5)">
<path id="open-sf" d="m 676.87112,800.18359 c -10.98297,-11.6517 -34.02821,-41.2811 -44.20659,-56.83667 -13.45969,-20.57037 -18.38402,-35.18399 -15.87947,-47.12449 1.5152,-7.22376 5.28232,-11.95044 12.47423,-15.65165 12.81419,-6.59463 23.64092,-4.21836 44.24071,9.71004 10.9829,7.42601 23.06523,19.24997 27.23518,26.65277 5.55661,9.8645 7.52277,17.39418 7.06848,27.06978 -0.33107,7.05093 -0.87977,9.38437 -3.09595,13.166 -6.23773,10.64389 -13.50628,15.11696 -24.70771,15.20516 -6.49747,0.0512 -8.2116,-0.33513 -12.82355,-2.8899 -6.07973,-3.36784 -10.13783,-8.04072 -13.65538,-15.72405 -6.53493,-14.27417 -3.107,-30.5994 9.22123,-43.91536 6.28075,-6.78396 8.96523,-8.6041 10.47026,-7.09907 0.66378,0.66378 -1.15567,3.12193 -5.43479,7.34264 -10.91667,10.76763 -14.94871,22.79264 -11.31288,33.73908 2.90632,8.75012 8.11139,13.2989 18.38235,16.06459 8.28733,2.23154 19.71224,-2.27396 24.20666,-9.54609 2.82049,-4.56364 3.97709,-12.68671 2.76409,-19.41278 -2.26254,-12.54564 -12.44752,-25.23799 -29.55696,-36.83335 -22.56927,-15.29558 -35.24393,-16.99918 -46.36691,-6.23217 -3.9477,3.82136 -4.83782,5.3805 -5.46094,9.56552 -2.62112,17.60391 12.48854,44.47851 49.97579,88.88876 l 10.03545,11.88876 4.32563,-4.88876 c 7.7146,-8.71892 24.37067,-30.50031 32.76203,-42.84338 10.65788,-15.67695 16.81669,-26.55987 19.39045,-34.26384 2.55112,-7.63621 2.79122,-18.97517 0.50386,-23.79542 -2.65743,-5.60012 -12.79652,-11.34298 -20.20137,-11.44223 -5.1703,-0.0693 -13.71939,3.41974 -20.85398,8.51088 -5.72249,4.08349 -6.7471,4.49774 -8.00739,3.23745 -1.26029,-1.26029 -0.67674,-1.98428 4.56049,-5.65799 14.4415,-10.13013 25.36025,-12.19551 36.2364,-6.85445 21.32888,10.47419 19.48527,32.04244 -5.95955,69.72022 -11.70173,17.3275 -40.33973,54 -42.16925,54 -0.34421,0 -2.21649,-1.6875 -4.16062,-3.75 z" />
native getBBox: <span id="native"></span>
sampled getBBox: <span id="sampled">(sampling for a second…)</span>
function getBBox(path, seconds, prec) { , x1 = Infinity, x2 = -x1
, y1 = Infinity, y2 = -y1
, pr = prec || window.precision || 4
, l = path.getTotalLength()
, t2 = +(new Date) + (seconds || 1) * 1e3
while ((new Date) < t2) { c = path.getPointAtLength(l * Math.random());
x1 = Math.min(x1, c.x); x2 = Math.max(x2, c.x);
y1 = Math.min(y1, c.y); y2 = Math.max(y2, c.y);
console.log('path.getBBox:', bb.x.toFixed(pr), bb.y.toFixed(pr) , bb.width.toFixed(pr), bb.height.toFixed(pr));
bb = { x: x1, y: y1, width: x2 - x1, height: y2 - y1 }; console.log('(js) getBBox:', bb.x.toFixed(pr), bb.y.toFixed(pr) , bb.width.toFixed(pr), bb.height.toFixed(pr));
return bb || [x1, y1, x2 - x1, y2 - y1];
var path = document.getElementById('open-sf') , native = document.getElementById('native') , sampled = document.getElementById('sampled')native.textContent = format(path.getBBox());
sampled.textContent = format(getBBox(path));
function precision(n) { return n.toFixed(prec); } return [bbox.x, bbox.y, bbox.width, bbox.height].map(precision).join(' ');