31:[] 2f:{"title":"getPointAtLength browser bug","cells":[{"id":0,"value":"md`# getPointAtLength browser bug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`The point does not appear to follow the path in Chrome Version 65.0.3325.181 (Official Build) (64-bit) on macOS Sierra (version 10.12.6). It works as expected in Safari Version 11.1 (12605.1.33.1.3) and Firefox 59.0.2 (64-bit) on the same platform.\n\nFiddle with the pathLengthPercent (currently at ${Math.round(pathLengthPercent * 100)}%) to see dots follow the path (or not).\n\nThe red dot is the browser's native getPointAtLength function, while the blue dot is from the [svg-path-properties library](https://github.com/rveciana/svg-path-properties).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof pathLengthPercent = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof r = DOM.range(0, 1000, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"pathD = `M${x1},${y1} A ${r},${r} 0 1 0 ${x2},${y2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"pathLengthPercent","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"pointOnPath = {\n let path = d3.select('path').node()\n try {\n let totalLength = path.getTotalLength();\n return path.getPointAtLength(path.getTotalLength() * pathLengthPercent);\n } catch(e) {\n return {x: 0, y: 0}\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"jsPointOnPath = {\n let path = svgPathProperties.svgPathProperties(pathD)\n try {\n let totalLength = path.getTotalLength();\n return path.getPointAtLength(path.getTotalLength() * pathLengthPercent);\n } catch(e) {\n return {x: 0, y: 0}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"r","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"x1 = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"x2 = width * 0.75","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"y1 = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"y2 = width * 0.15","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"svgPathProperties = require('svg-path-properties')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}