Search code examples
svgiso8601svg-animate

SVG animation begin at wallclock-sync-value


SVG spec by w3c defines wallclock-sync-value as a possible value for "begin" attribute ( http://www.w3.org/TR/SVG/animate.html#WallclockSyncValueSyntax ).
In other words: start animation based on real clock time, not based on times relative to document loading.

I want to create a SVG clock in a situation, where scripting is disabled.

I failed to find any examples of the wallclock usage, but based on the spec and ISO8601 ( http://en.wikipedia.org/wiki/ISO_8601 ) I made following excample:

<text 
  x="0" 
  y="15" 
  opacity="0" >

    <animate 
      attributeName="opacity" 
      attributeType="XML" 
      begin="wallclock(2000-01-01T00:00:00Z)" 
      dur="10s" 
      values="1; 1; 0; 0" 
      keyTimes="0; 0.07; 0.1; 1" 
      repeatCount="indefinite" />
  0
</text>

That should be the rightmost "0" digit in a digital clock, and should flicr every 10 secconds. It works when I set begin="0s".

Unfortunately it does not work as expected. For example in Firefox developer console it gives a js warning(!?!) "Unexpected value wallclock(2000-01-01T00:00:00Z) parsing begin attribute."

Is wallclock-sync-value implemented in modern browsers, and how to use it?


Solution

  • Firefox doesn't currently implement wallclock and won't be implementing it in the future either.

    We expect it to disappear and be replaced by something else in SVG 2. I believe the developers of the other UAs are of a similar opinion.