File:Animated analog SVG clock.svg
This file is from Wikimedia Commons and may be used by other projects. The description on its file description page there is shown below.
Summary
| DescriptionAnimated analog SVG clock.svg |
Deutsch: Animierte analoge SVG-Uhr.
English: Animated analog SVG clock. |
|||
| Date | ||||
| Source |
Own work English: Based on this master image.
Deutsch: Basierend auf dieser Bildvorlage. |
|||
| Author | Fleshgrinder | |||
| Permission (Reusing this file) |
|
|||
| SVG development InfoField |
This image is an animated SVG file. The .png preview above created by RSVG for use in Wikimedia is not animated and may be incomplete or incorrect. To see the animation, open media:Animated analog SVG clock.svg. It should run in any modern browser or viewer. Recent versions of Chrome, Firefox, Microsoft Edge, Safari, and Opera all support SVG animated with SMIL.
Other SVG animations can be found at Category:Animated SVG files.
|
Summary
/**
* 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)");
}
This image has been assessed using the Quality image guidelines and is considered a Quality image.
العربية ∙ جازايرية ∙ беларуская ∙ беларуская (тарашкевіца) ∙ български ∙ বাংলা ∙ català ∙ čeština ∙ Cymraeg ∙ Deutsch ∙ Schweizer Hochdeutsch ∙ Zazaki ∙ Ελληνικά ∙ English ∙ Esperanto ∙ español ∙ eesti ∙ euskara ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ हिन्दी ∙ hrvatski ∙ magyar ∙ հայերեն ∙ Bahasa Indonesia ∙ italiano ∙ 日本語 ∙ Jawa ∙ ქართული ∙ Qaraqalpaqsha ∙ 한국어 ∙ kurdî ∙ кыргызча ∙ Latina ∙ Lëtzebuergesch ∙ lietuvių ∙ македонски ∙ മലയാളം ∙ मराठी ∙ Bahasa Melayu ∙ Nederlands ∙ Norfuk / Pitkern ∙ polski ∙ português ∙ português do Brasil ∙ rumantsch ∙ română ∙ русский ∙ sicilianu ∙ slovenčina ∙ slovenščina ∙ shqip ∙ српски / srpski ∙ svenska ∙ தமிழ் ∙ తెలుగు ∙ ไทย ∙ Tagalog ∙ toki pona ∙ Türkçe ∙ українська ∙ oʻzbekcha / ўзбекча ∙ vèneto ∙ Tiếng Việt ∙ 中文 ∙ 中文(简体) ∙ 中文(繁體) ∙ +/− |
Captions
Items portrayed in this file
depicts
some value
11 November 2010
image/svg+xml
97f47b2fca1cd97c29a7f1bd45639e5ca43e8ac1
34,056 byte
512 pixel
512 pixel
File history
Click on a date/time to view the file as it appeared at that time.
| Date/Time | Thumbnail | Dimensions | User | Comment | |
|---|---|---|---|---|---|
| current | 22:50, 14 November 2010 | 512 × 512 (33 KB) | wikimediacommons>Fleshgrinder | Updated version with more SFX and improved readability. This SVG is not minimized so it’s easier to have a direct look at the source code. |
File usage
The following page uses this file: