Demonstration einer SVG Objektgrafik

• Diese → SVG Objektgrafik besteht lediglich aus einigen Kreis <circle> und Strich <line> Elementen.
Der SVG-Quelltext wurde mit → PHP Live erzeugt, die Uhr zeigt daher die aktuelle Zeit (des Server-PC) an.

• Die Formatierung erfolgt mit → CSS. An Stelle der Eigenschaften color, background-color von HTML-Elementen wird in SVG zwischen stroke (Strich-Farbe) und fill (Flächen-Farbe) unterschieden.

• In SVG werden mehrfach verwendete Elemente nur einmal konstruiert, z.B. die 12 Stunden-Striche. Danach kann man sie mit dem SVG-Element <use> beliebig oft verwenden.

• Der Nullpunkt des Koordinaten-Systems wird zweckmäßig in den Mittelpunkt der Uhr verlegt. Dazu werden alle Elemente der Uhr in eine gemeinsame Gruppe <g id="uhr"> eingeschlossen und mit dem Attribut transform an den gewünschten Punkt verschoben.
• Diese Version ist mit → Javascript animiert: Dazu werden die 3 Zeiger-Striche mit ihren jeweiligen transform- Attributen gedreht.
Um Resourcen zu sparen, werden Minuten- und Stundenzeiger nur zur vollen Minute gedreht.
Die Animation wird erst nach dem Laden der kompletten Grafik gestartet, d.h. mit dem onload-Ereignis des Dokuments.
Als Programmiersprache ist nur Javascript geeignet, weil die Funktionen am Client-PC ausgeführt werden. Javascript ist viel schneller als die laufende Übertragung neuer Daten vom Server wäre, außerdem wird damit der Webserver und das Netzwerk entlastet.

• Die System-Uhr des Client-PC wird lediglich als Taktgeber für die Animation verwendet. Die Differenz zwischen Server-Zeit und Client-Zeit wird mit PHP an die globale Javascript-Variable server_dif zugewiesen. Damit wird von der Uhr die (zuverlässige) Zeit des Server-PC auch dann angezeigt, wenn die Uhr des Client-PC falsch eingestellt ist.
Optionen zur Anzeige des SVG- und PHP-Quelltextes:
Keinen Quelltext anzeigen
Einfache teil-statische Analog-Uhr
Dynamische Analog-Uhr mit Animation