Roadtrains are an Australian phenomena that you only see in the outback. A large truck is followed by a long train of trailers that mange to go round corners.

After a presentation at Ausweb, some effort went into producing a more professional SMIL presentation.

That was used as an example when teaching SMIL for a number of years and with the demise of SMIL it was turned into a longer SVG animation that looks like a SMIL presentation.

The SVG animation has gone through a series of changes over the years mainly due to the dumbing down of SVG caused by the lack of support by the browser vendors. The history is:

  • Version 1: ran using the Adobe Plugin in IE and demonstrated that you could produce a font made up of trailers and engines so that a variety of text strings could be used to define specific roadtrains. The glyphs in the font were:
    • A: Red self tracker
    • C: 3 deck cattle trailer
    • D: 2 deck cattle trailer
    • E: Straw trailer
    • F: Pipes trailer
    • G: Canvas trailer
    • H: Esso tanker
    • J: Trailer with door
    • O: Red low loader
    • P: Green trailer
    • Q: 4 deck cattle trailer
    • R: Basic truck
    • S: Truck with window
    • T: Esso truck
    • V: 4 deck cattle trailer with sheep
    • W: 3 deck cattle trailer with cows
    • eg the text string SQACADAEAFAGAHAJAOAP is a roadtrain
  • Roadtrains were possible because of the self trackers (A) that ensure that if the first trailer goes through the gate then the following ones do as well. The only downside is that if the first one hits the gate so do all the rest ;-)

One of the long treks that are made across Australia is Bamaga in Queensland to Broome in Westen Australia, a distance of 5300 miles.

People started to see how many trailers they could pull and it was soon possible to pull 20 or more trailers. Then it became a sport and by 2006 104 trailers were pulled with a total length of 1474 metres.

The first SVG animation was quite impressive with:

  • Text strings in the roadtrain font that had as many as 209 characters representing the record haul with the self trackers. These were animated using textPath with startOffset="100%" and animating the offset to 0 gave a really good animation of the roadtrain moving from Bamaga to Broome.
  • The Adobe plugin allowed the font glyphs to be animated so the V and W trailers were stocked with cows and sheep whose heads moved backwards and forwards as the roadtrain progressed
  • As can be seen by the descriptions, there was full control of attributes in the definition of the font glyphs and nearly all the trailers were multi-coloured
  • As the roadtrain moved from Bamaga to Broome the number of trailers increased and the test strings continued to move along the path extremely well

Since the demise of the Adobe SVG plugin there has been a dumbing down of the font facilities in SVG with support in this activity from Google and Mozilla. The current state is:

  • First: it was no longer possible to defines glyphs made up on multiple paths with their own styling
  • Second: it was only possible to define single paths as glyph definitions
  • Third: SVG fonts were deprecated
  • Fouth: Chrome and Firefox stopped supporting SVG fonts completely unless you used an out-of-date operating system with an out-of-date browser.

And that is what is called progress!

So the animation here is an attempt to recreate the original animation without using fonts. It is pretty well impossible as their are no facilities for objects in SVG to sit on a path other than animating text which is no longer supported by the browsers. An attempt to animateMotion along a path for a set of trailers that gradually increased was abandoned. It is necessary either to compute lots of offsets or create a series of paths to achieve an almost useless result. If or when SVG animation support gets moved to CSS the chances of even this being possible must be getting close to zero.