timesheets.js

timesheets.js can also be used with SVG documents, like this mini-slideshow below — click on the demo block to cycle through the SVG slides.

View this demo in full page.

SVG Markup

We could have used inline SVG in this HTML5 document, but we have chosen to embed a full SVG document in an <object> element instead — mostly to support older browsers. Here’s the markup of the SVG document:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 800 540" preserveAspectRatio="xMidYMid meet"
     xmlns       = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:smil  = "http://www.w3.org/ns/SMIL">

  <title> SVG Timing </title>
  <script type="text/javascript" xlink:href="timesheets.js"></script>

  <style type="text/css">
    […]
  </style>

  <defs>
    […]
  </defs>

  <g id="slideshow"
     smil:timeContainer = "seq"
     smil:timeAction    = "intrinsic"
     smil:repeatCount   = "indefinite"
     smil:next          = "click">

    <g> […] </g>
    <g> […] </g>
    <g> […] </g>
    <g> […] </g>
    <g> […] </g>

  </g>
</svg>

Notice the xlink and smil namespace declarations in the <svg> root element.

The slideshow structure is similar to typical HTML slideshows: one <seq> container node, each slide is a <g>roup element.