Files used

Right-click, save ...

• animated_bustrack.shtml
• animated_bustrack.svg

Technical Details

Because svg does not know a builtin-feature for progressive drawing of lines one can fake and use an animated dashing, with dash-line-segments as long as the whole path-segment is and a moving dash-offset from the beginning towards the end of the line. This trick was first shown by Michel Hirtzler for the progressive drawing of the french coastline and border.

The following construct shows the path-definitions and the basic setup for dash-animation. Both the path itself and the animation definitions need unique identifiers because their attribute values will be queried and set later with a javascript function. Therefore some initial attribute values in the animation definition are not correct initially.

<g id="bustracks" style="&st47;">
  <path id="busTrack1" d="M296.614,1678.855l-32.901-20.428">
    <animate id="dashAnim1" attributeName="stroke-dashoffset" from="0"
                                     to="0" dur="2s" begin="2s" fill="freeze"
                               keySplines="0 0.5 0.5 1" calcMode="spline"/>
  </path>
  <path id="busTrack2" d="M263.713,1658.427l-.....0.228-19.745">
    <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0"
                        to="0" dur="10s" begin="dashAnim1.end+2s" fill="freeze"
                                keySplines="0.4 0 0.7 1" calcMode="spline"/>
  </path>
  <path id="busTrack3" d="M272.563,1371.387........1.735,0.454,51.735">
    <animate id="dashAnim3" attributeName="stroke-dashoffset" from="0" 
                         to="0" dur="10s" begin="dashAnim2.end+2s" fill="freeze"
                                  keySplines="0.3 0 0.7 1" calcMode="spline"/>
  </path>
  <path id="busTrack4" d="M255.998,1370.934l......,17.019,10.438">
    <animate id="dashAnim4" attributeName="stroke-dashoffset" from="0" 
                   to="0" dur="10s" begin="dashAnim3.end+2s" fill="freeze"
                         keySplines="0.3 0 0.7 1" calcMode="spline"/>
  </path>
  <path id="busTrack5" d="M270.066,1670.905l12.707,8.171">
   <animate id="dashAnim5" attributeName="stroke-dashoffset" from="0"
                        to="0" dur="2s" begin="dashAnim4.end+2s" fill="freeze"
                             keySplines="0.5 0 1 0.5" calcMode="spline"/>
  </path>
<g/>

The whole path is broken into 5 sections, each intersection is a bus-stop where the animations halt for two seconds (see begin="previous_animation.end+2s"). The keySpline-attribute contains the description of a Bézier-curve with two control points in order to control speed effects. Animation one defines an deceleration effect, Animation 2-4 acceleration and deceleration effects, Animation 5 only acceleration. (see also www.w3.org/TR/SVG/animate.html#ValueAttributes)

To reset the start values for the animation we need to replace the dash-array-attribute and from-attribute with the path-segments length. To get the length-value we can use the method .getTotalLength(). The following javascript-code shows how to do this. The function is called with the onLoad-event.

function init() {
  for(var i=1; i<6; i++) {
    setAnimations(i);
  }
}
function setAnimations(number) {
  busTrack=document.getElementById('busTrack'+number);
  trackLength=busTrack.getTotalLength().toString();
  busTrackAnim=document.getElementById('dashAnim'+number);
  busTrack.setAttributeNS(null,'stroke-dasharray',trackLength+" "+trackLength);
  busTrack.setAttributeNS(null,'stroke-dashoffset',trackLength);
  busTrackAnim.setAttributeNS(null,'from',trackLength);
  busTrackAnim.setAttributeNS(null,'values',trackLength+';0');
}

Credits: Michel Hirtzler for his pilat.free.fr/english/animer/france.htm progressive drawing examples. Olaf Schnabel for fixing the example and adding FakeSmile for Firefox-Support.