Skip to content

Instantly share code, notes, and snippets.

@hnakamur
Created July 26, 2014 03:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hnakamur/f203e1cb6adedb56eca8 to your computer and use it in GitHub Desktop.
Save hnakamur/f203e1cb6adedb56eca8 to your computer and use it in GitHub Desktop.
SVG path getTotalLength() in Firefox returns 0 or a wrong large value for some cubic bezier segments. try http://bl.ocks.org/hnakamur/f203e1cb6adedb56eca8
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div id='example'>
<svg width="300" height="300">
<path id="path1" d="M229.99999999999994,196.66666666666666C229.99999999999997,213.33333333333331,229.99999999999997,246.66666666666666,241.66666666666663,263.3333333333333" stroke="black" fill="none"/>
<path id="path2" d="M241.66666666666663,263.3333333333333C253.33333333333331,280,276.66666666666663,280,288.3333333333333,280" stroke="black" fill="none"/>
</svg>
</div>
<pre>
Chrome 36.0.1985.125
path1.length 68.57687377929688
path2.length 51.637718200683594
Safari 6.1.5 (8537.77.4)
path1.length 68.57698059082031
path2.length 51.63789749145508
Firefox 31.0
path1.length 0 # wrong!
path2.length 123295481856 # wrong!
Firefox Nightly 34.0a1 (2014-07-25)
path1.length 0 # wrong!
path2.length 123295481856 # wrong!
</pre>
<script>
var n = 2, i, path;
for (i = 1; i <= n; i++) {
path = document.getElementById('path' + i);
if (path) {
console.log('path' + i, path);
console.log('path' + i + '.length', path.getTotalLength());
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment