D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hnakamur
Full window
Github gist
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>