File:Animated analog SVG clock.svg

/**
 * Set the clock to the client's system time, directly after the SVG is loaded.
 *
 * @param evt e
 */
function s(e) {
	// Create new Date() object.
	var d = new Date();
	// Get current seconds.
	var s = d.getSeconds();
	// Get current minutes and add the current second.
	var m = d.getMinutes() + s / 60;
	// Get current hours and add the current minute.
	var h = d.getHours() + m / 60;
	// Get the current document, so we can alter the DOM.
	var svg = e.target.ownerDocument;
	// Rotate the second clockhand to the current seconds.
	svg.getElementById("Second").setAttribute("transform", "rotate(" + (s * 6) + ", 256, 256)");
	svg.getElementById("SecondShadow").setAttribute("transform", "rotate(" + (s * 6) + ", 253, 259)");
	// Rotate the minute clockhand to the current minute.
	svg.getElementById("Minute").setAttribute("transform", "rotate(" + (m * 6) + ", 256, 256)");
	svg.getElementById("MinuteShadow").setAttribute("transform", "rotate(" + (m * 6) + ", 254, 258)");
	// Rotate the hour clockhand to the current hour.
	svg.getElementById("Hour").setAttribute("transform", "rotate(" + (h * 30) + ", 256, 256)");
	svg.getElementById("HourShadow").setAttribute("transform", "rotate(" + (h * 30) + ", 255, 257)");
}