| license: mit |
A demonstration of a precise svg path overlaying a static image. Once the path is overlayed interactive features can be added—this visual shows a plotted stationary transparent circle, and an animated smaller circle that follows the train track found in the image.
The image is a Japanese tourist map found in The Visual Display of Quantitative Information by Edward Tufte.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Visitor map Ise moving SVG</title> | |
| <style type="text/css">path { | |
| fill: none; | |
| stroke: #24FFA7; | |
| stroke-width: 3px; | |
| stroke-linejoin: round; | |
| opacity: .5; } | |
| circle { | |
| fill: white; | |
| opacity: .5; } | |
| circle.train { | |
| opacity: .9; } | |
| </style> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.js"></script> | |
| </head> | |
| <body> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| width="1023.872px" height="304.962px" viewBox="0 0 1023.872 304.962" enable-background="new 0 0 1023.872 304.962" | |
| xml:space="preserve"> | |
| <g id="Layer_1"> | |
| <image inline display="inline" overflow="visible" width="1024" height="305" xlink:href="./MapCarte32_ise_large_72.jpg" transform="matrix(0.9999 0 0 0.9999 0 0)"/> | |
| </g> | |
| <g id="Layer_2"> | |
| <path fill="none" stroke="#FFFFFF" d="M956.333,182.334l-11,30.667h-94l-18,6c0,0-87.999,1.666-86.666,1.666l-36.75,20.167 | |
| l-207.04,2.492L492,241.833l-68.688-22.646l-86.938-1.125L187.5,217.833L73.186,206.701l-16.588-6.924l-13.931-13.444l0.833-2.052 | |
| c0,0,78.118-52.045,79.667-52.948c0.412-0.24,9.333-1.167,9.333-1.167s8.422-5.695,8.833-5.833 | |
| c2.454-0.821,150.954-19.762,162.292-22.458"/> | |
| </g> | |
| </svg> | |
| </body> | |
| <script>var svg = d3.select("body svg"); | |
| var startingPoint = [956.333,182.334]; | |
| var path = d3.select('#Layer_2 path'); | |
| var circle = svg.append("circle") | |
| .attr("class","train") | |
| .attr("r", 6) | |
| .attr("transform", "translate(" + startingPoint + ")"); | |
| var totalLength = path.node().getTotalLength(); | |
| console.log(totalLength); | |
| var pCirc = path.node().getPointAtLength(.5 * totalLength); | |
| var dCirc = "translate(" + pCirc.x + "," + pCirc.y + ")"; | |
| var testCircle = svg.append('circle') | |
| .attr("r", 25) | |
| .attr("transform", dCirc); | |
| transition(); | |
| function transition() { | |
| circle.transition() | |
| .duration(10000) | |
| .ease(d3.easeLinear) | |
| .attrTween("transform", translateAlong(path.node())) | |
| .on('end',transition); | |
| } | |
| // Returns an attrTween for translating along the specified path element. | |
| function translateAlong(path) { | |
| var l = path.getTotalLength(); | |
| return function() { | |
| return function(t) { | |
| var p = path.getPointAtLength(t * l); | |
| return "translate(" + p.x + "," + p.y + ")"; | |
| }; | |
| }; | |
| }</script> | |
| </html> | |
