Take the 2-minute tour ×

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

share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

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" 

Javascript code:

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
share|improve this answer
Thanks a million –  Fuzzyvagina Jul 12 '12 at 8:01
add comment

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.

share|improve this answer
I tried this with no luck. Even tried continuing the line and completing the shape, but to no avail. (Working with AI5) –  Fuzzyvagina Jul 11 '12 at 10:28
Weird. It does work, I'm quite sure. I had to do this numerous times recently for a project extremely similar to yours. Visually scan/compare the first few lines of the two svg files as a sanity check that you've actually changed the file. –  Ben Jul 11 '12 at 17:04
add comment

It's definitely possible, except that you need a way of figuring out where the 'pen' is after a series of operations, because you need to figure out where it finished drawing to trace its steps backwards. Animating an SVG backwards involves the following:

  1. Break down the SVG into component curves separated by absolute movements and figure out their endpoints. At the bare minimum, you have a single continuous line that has a single endpoint. You need to play the curve forward to calculate its final position.

  2. Play the commands backwards. In most cases, this is trivial. A line that goes (+x, +y) needs to be retraced (-x, -y). A curve with endpoints (x1, y1) and control points (x2, y2) needs to be retraced as a curve with endpoints (y1, x1) and control points (y2, x2). Every command has its opposite.

Once you've got that, it's simply a matter of playing each component backwards. The tough part is just figuring out the final position of each component. Basically, you need to play each component forward without drawing. There are plenty of open source graphics libraries available that will help you figure this out. If you find yourself writing code to figure out the endpoint of a Bezier curve, you haven't looked hard enough.

share|improve this answer
When I said I have no experience of how SVG/animation works I meant it. This is way more complicated than I have time/capacity for, but thanks anyway. –  Fuzzyvagina Jul 11 '12 at 10:33
add comment

Your Answer


