Question

I know almost nothing about SVG files, but have to use one in order to draw a line to indicate a route (I don’t know enough about canvas to make that an option).

I found some examples and managed to achieve what I’m after, but it turns out The line needs to move from right to left.

I exported the path from Illustrator and have no idea how to reverse them. Is there a way I can reverse the animation?

Here is the file: http://jdfv.nl/route.svg

Answer 1

Here’s one way:
http://jsfiddle.net/VTp4D/

Relevant part of SVG file:

<path id="busTrack2" ...>
  <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0" 
   to="0" dur="10s" begin="0" fill="freeze" keySplines="0 0.5 0.5 1" 
   calcMode="spline"/>
</path>

Javascript code:

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');