Display UTC and local time using analogue clocks. This document uses Javascript and inline SVG code in an XHTML document. It can be viewed using a namespace- and SVG-capable browser such as Firefox 1.5 or Opera 9 (Technology Preview 2), or using Microsoft Internet Explorer 6.0 (MSIE6) with the Adobe SVG Viewer 3.03 (ASV) plug-in.
121234567891011UTC TimeAMPMLocal TimeAMPM
Programming Notes
The SVG element can be included in XHTML table cells.
In Firefox, an SVG element in one SVG element can be referenced in another SVG elements by the use element. Unfortunately in MSIE + ASV each instance of the ASV plug-in seems to be independent of each other and cannot reference each other's elements. Consequently, I can't define an element (for example, the clock faces) in one SVG element, then use it in another SVG element. For instance, it would have been slightly easier to design this page using a table with two columns and placing each SVG element in a table cell.
Intermixing XHTML and SVG elements doesn't seem to work. For example, using XHTML tables to layout individual drawing elements does not work.
About half-way through, I found that this demonstration isn't as interesting as I had planned because generally only the hour hand is in a different angle for clocks in different time zones.
The clock's tick marks are drawn using stroke-dasharray but rotated 1 degree clockwise to make the 3 and 9 line up.
Doesn't ASV use CSS styles in either the XHTML document or the SVG element? For this demonstration, the text-anchor="middle" and style attributes are defined in the style element. If you're using Firefox, you should be able to see the numbers in the right position in large font. If you're using MSIE + ASV, the numbers would be drawn slightly off position to the right and downward using the default sans serif font.
Positioning the clock's numbers is fiddly because the y coordinate should be at the centre of the font, not at the baseline. It would have been nice to use the tspan's baseline-shift attribute, but that doesn't seem to have any effect in Firefox. Instead, I used tspan's dy attribute.
How can I address SVG namespace elements using CSS? It would be nice to define a style for SVG text element instead of having to repeat all the same attribute values in each tag. See update 8 April 2006.
The right edge of the "e" in "Time" is cropped in Firefox but not in MSIE + ASV.
8 April 2006.
Added slight drop shadow for the clock face.
Tested with Opera 9 with no problems.
Added draft CSS3 namespace selector suggested by Martin Honnen. This feature works with Opera 9 but not with Firefox 1.5.0.1. If you look in the Firefox Javascript console, you can see an error Unrecognized at-rule or error parsing at-rule '@namespace'.