How to reverse an animated line in SVG

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');

Answer 2

To reverse the path direction, you need to edit the path file in illustrator. SVG paths are directional. The path markup describes where they start, and where they move around to. (It's very verbose, but also pretty powerful.)

In Illustrator, select the path with the direct selection tool, then choose the pen tool, and click once on what you want to be the endpoint (where the bus "stops") of the animated path. It will look exactly the same on screen, but the direction will have reversed. Resave the file and swap it out. Then the animated stroke-dashoffset will go the other way.