johan/index.html

## index.html
<!DOCTYPE html>
<html><head>
<title>Testing the native precision of SVGPath.getBBox()</title>
<meta charset="utf-8">
<style>
pre { text-align: center; }
svg { position: absolute; left: 0; top: 0; }
html, body { width: 960px; height: 500px; margin: 0; padding: 0; }
</style>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
</head><body>
<svg viewBox="614.2805 673.9761 136.2089 129.9573" width="960" height="500"
     style="position: absolute; pointer-events: none;" 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" />
</svg><pre>


 native getBBox: <span id="native"></span>
sampled getBBox: <span id="sampled">(sampling for a second…)</span>
<a href="http://raphaeljs.com/reference.html#Raphael.pathBBox" target="_blank">Raphael.pathBBox</a> <span id="raphael"></span>
</pre>

<script>
var prec = 4;

function getBBox(path, seconds, prec) {
  var bb = path.getBBox()
    , x1 = Infinity, x2 = -x1
    , y1 = Infinity, y2 = -y1
    , pr = prec || window.precision || 4
    , l  = path.getTotalLength()
    , i  = 0
    , t2 = +(new Date) + (seconds || 1) * 1e3
    , c
    ;
  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')
  , raphael = document.getElementById('raphael')
  ;

native.textContent = format(path.getBBox());
raphael.textContent = format(Raphael.pathBBox(path.getAttribute('d')))
sampled.textContent = format(getBBox(path));

function format(bbox) {
  function precision(n) { return n.toFixed(prec); }
  return [bbox.x, bbox.y, bbox.width, bbox.height].map(precision).join(' ');
}

document.onclick = function(e) {
  if (!(e.target||e.srcElement).href)
    prompt('native precision:', format(path.getBBox()));
};

</script>
</body></html>
	<!DOCTYPE html>
	<html><head>
	<title>Testing the native precision of SVGPath.getBBox()</title>
	<meta charset="utf-8">
	<style>
	pre { text-align: center; }
	svg { position: absolute; left: 0; top: 0; }
	html, body { width: 960px; height: 500px; margin: 0; padding: 0; }
	</style>
	<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
	</head><body>
	<svg viewBox="614.2805 673.9761 136.2089 129.9573" width="960" height="500"
	style="position: absolute; pointer-events: none;" 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" />
	</svg><pre>





	native getBBox: <span id="native"></span>
	sampled getBBox: <span id="sampled">(sampling for a second…)</span>
	<a href="http://raphaeljs.com/reference.html#Raphael.pathBBox" target="_blank">Raphael.pathBBox</a> <span id="raphael"></span>
	</pre>

	<script>
	var prec = 4;

	function getBBox(path, seconds, prec) {
	var bb = path.getBBox()
	, x1 = Infinity, x2 = -x1
	, y1 = Infinity, y2 = -y1
	, pr = prec \|\| window.precision \|\| 4
	, l = path.getTotalLength()
	, i = 0
	, t2 = +(new Date) + (seconds \|\| 1) * 1e3
	, c
	;
	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')
	, raphael = document.getElementById('raphael')
	;

	native.textContent = format(path.getBBox());
	raphael.textContent = format(Raphael.pathBBox(path.getAttribute('d')))
	sampled.textContent = format(getBBox(path));

	function format(bbox) {
	function precision(n) { return n.toFixed(prec); }
	return [bbox.x, bbox.y, bbox.width, bbox.height].map(precision).join(' ');
	}

	document.onclick = function(e) {
	if (!(e.target\|\|e.srcElement).href)
	prompt('native precision:', format(path.getBBox()));
	};

	</script>
	</body></html>