Demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along an existing path. Built with D3.
-
-
Save nick-thompson/382a31b7851a349b6c31ddd49013d2de to your computer and use it in GitHub Desktop.
Point-Along-Path Interpolation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| cursor: pointer; | |
| fill: #eee; | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| } | |
| circle { | |
| fill: steelblue; | |
| stroke: white; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <svg id="swag" width="66px" height="108px" viewBox="373 119 66 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> | |
| <desc>Created with Sketch.</desc> | |
| <defs></defs> | |
| <path d="M428.928,138.464 C426.719989,135.391985 423.888017,132.920009 420.432,131.048 C416.975983,129.175991 412.800024,128.24 407.904,128.24 C405.407988,128.24 402.864013,128.623996 400.272,129.392 C397.679987,130.160004 395.328011,131.335992 393.216,132.92 C391.103989,134.504008 389.400006,136.495988 388.104,138.896 C386.807994,141.296012 386.16,144.127984 386.16,147.392 C386.16,150.656016 386.783994,153.343989 388.032,155.456 C389.280006,157.568011 390.93599,159.367993 393,160.856 C395.06401,162.344007 397.415987,163.567995 400.056,164.528 C402.696013,165.488005 405.455986,166.447995 408.336,167.408 C411.888018,168.560006 415.463982,169.807993 419.064,171.152 C422.664018,172.496007 425.903986,174.247989 428.784,176.408 C431.664014,178.568011 434.015991,181.303983 435.84,184.616 C437.664009,187.928017 438.576,192.127975 438.576,197.216 C438.576,202.304025 437.59201,206.695982 435.624,210.392 C433.65599,214.088018 431.112016,217.135988 427.992,219.536 C424.871984,221.936012 421.32002,223.711994 417.336,224.864 C413.35198,226.016006 409.34402,226.592 405.312,226.592 C402.239985,226.592 399.168015,226.280003 396.096,225.656 C393.023985,225.031997 390.096014,224.096006 387.312,222.848 C384.527986,221.599994 381.936012,220.01601 379.536,218.096 C377.135988,216.17599 375.024009,213.968012 373.2,211.472 L382.128,204.848 C384.336011,208.496018 387.43198,211.543988 391.416,213.992 C395.40002,216.440012 400.079973,217.664 405.456,217.664 C408.048013,217.664 410.687987,217.256004 413.376,216.44 C416.064013,215.623996 418.487989,214.376008 420.648,212.696 C422.808011,211.015992 424.583993,208.952012 425.976,206.504 C427.368007,204.055988 428.064,201.200016 428.064,197.936 C428.064,194.383982 427.368007,191.432012 425.976,189.08 C424.583993,186.727988 422.736012,184.760008 420.432,183.176 C418.127988,181.591992 415.488015,180.272005 412.512,179.216 C409.535985,178.159995 406.416016,177.104005 403.152,176.048 C399.791983,174.991995 396.480016,173.792007 393.216,172.448 C389.951984,171.103993 387.024013,169.352011 384.432,167.192 C381.839987,165.031989 379.752008,162.368016 378.168,159.2 C376.583992,156.031984 375.792,152.144023 375.792,147.536 C375.792,142.639976 376.77599,138.416018 378.744,134.864 C380.71201,131.311982 383.279984,128.384012 386.448,126.08 C389.616016,123.775988 393.119981,122.096005 396.96,121.04 C400.800019,119.983995 404.591981,119.456 408.336,119.456 C415.248035,119.456 421.151976,120.679988 426.048,123.128 C430.944024,125.576012 434.639988,128.479983 437.136,131.84 L428.928,138.464 Z" id="S" stroke="none" fill="#000000" fill-rule="evenodd"></path> | |
| </svg> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var svg = d3.select("#swag"); | |
| var path = svg.select("path"); | |
| var circle = svg.append("circle") | |
| .attr("r", 6.5) | |
| .attr("transform", "translate(0," + -height / 3 + ")"); | |
| function transition() { | |
| circle.transition() | |
| .duration(5000) | |
| .attrTween("transform", translateAlong(path.node())) | |
| .each("end", transition); | |
| } | |
| transition(); | |
| // Returns an attrTween for translating along the specified path element. | |
| function translateAlong(path) { | |
| var l = path.getTotalLength(); | |
| return function(d, i, a) { | |
| return function(t) { | |
| var p = path.getPointAtLength(t * l); | |
| return "translate(" + p.x + "," + p.y + ")"; | |
| }; | |
| }; | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment