Simple SVG clock created with Snap
MIT License
Simple SVG clock created with Snap - http://snapsvg.io/
More info on my blog post at http://simonrjones.net/2014/03/analog-clocks-in-svg/
Simon R Jones, Studio 24 - www.studio24.net Robert Price - www.robertprice.co.uk
Define a clock with var clock = new Clock("clock")
Valid arguments passed to Clock are Clock(svgId, offset|hours, minutes, seconds)
You can set the time with clock.setTime(hours, minutes, seconds)
, for example clock.setTime(21, 37, 0)
or clock.setTime(21, 37)
Start a clock with clock.startClock()
Stop a clock with clock.stopClock()
Hide the second hand with clock.hideSecondHand()
<svg id="clock" width="300" height="300">
<script src="snap.svg-min.js"></script>
<script src="clock.js"></script>
<script>
// Start clock
var clock = new Clock("clock");
clock.startClock();
</script>
<script>
clock.stopClock();
</script>
<script>
var nyc = new Clock("clock", -5);
nyc.startClock();
</script>
It's best not to start a clock which you've set to a specific time. If you do start the clock it will immediately reset to the current local time as the clock updates.
<script>
var clock = new Clock("clock", 21, 45);
clock.hideSecondHand();
</script>
Instead of passing parameters as an array, they can be passed in an object as the second parameter.
Define a clock with var clock = new Clock("clock", options)
Valid options are
As with the classic usage, if an offset is added, then hours, minutes and seconds are ignored.
If you want the clock to animate, you still need start it using the .startClock() method.
<script>
var bouncer = new Clock("bouncer", { movement: "bounce", offset: 10, showSeconds: true });
bouncer.startClock();
</script>