This tutorial will be very simple and come with two files.
One of this file was an HTML file and also one SVG animated file.
First file just put the SVG file into html file, see:<html>
<head>
<title>Clock with SVG – free-tutorials.org</title>
</head>
<body>
<embed src=”clock.svg” width=”150″ height=”150″ />
</body>
</html>

The next file was a file with svg tags, like type of svg file , tags to make the circles and ticks also one script to take the time and show the clock time.
Take a look and you will understand how is working.

<?xml version=”1.0″ encoding=”UTF-8″?>
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
width=”100%” height=”100%”
viewBox=”0 0 150 150″ version=”1.1″>

<!–  (c) free-tutorials.org –>

<g id=”clock” style=”fill: rgb(10%,10%,10%)” transform=”translate(75,75) rotate(-90)”>
<g id=”fata_ceas”>
<circle style=”fill: rgb(15%,15%,15%)” cx=”0″ cy=”0″ r=”70″    />
<circle style=”fill: rgb(30%,70%,90%)” cx=”0″ cy=”0″ r=”65″/>
<circle style=”fill: rgb(70%,70%,70%)” cx=”0″ cy=”0″ r=”60″/>
</g>

<g id=”minutare”>
<rect transform=”rotate( 0)” x=”42.5″ y=”-2″ width=”17.5″ height=”4″/>
<rect transform=”rotate( 6)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(12)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(18)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(24)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(30)” x=”45″   y=”-2″ width=”15″   height=”4″/>
<rect transform=”rotate(36)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(42)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(48)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(54)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(60)” x=”45″   y=”-2″ width=”15″   height=”4″/>
<rect transform=”rotate(66)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(72)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(78)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(84)” x=”55″   y=”-1″ width=”5″    height=”2″/>
</g>

<use xlink:href=”#minutare” transform=”rotate(90)”/>
<use xlink:href=”#minutare” transform=”rotate(180)”/>
<use xlink:href=”#minutare” transform=”rotate(270)”/>

<path id=”hours”   d=”M -15 3.5 37.5 3.5 41 0 37.5 -3.5 -15 -3.5 Z” />
<path id=”minutes” d=”M -15 2   55   2   57 0 55   -2   -15 -2   Z” />
</g>
<script>
var minutehand = document.getElementById (“minutes”);
var hourhand   = document.getElementById (“hours”);

function updateTime () {
var date = new Date ();
var m = date.getMinutes() * 6 + date.getSeconds() / 10;
var h = date.getHours() * 30 + m / 12;

minutehand.setAttribute (“transform”, “rotate(” + m + “)”);
hourhand.setAttribute   (“transform”, “rotate(” + h + “)”);
window.setTimeout (“updateTime()”, 1000);
}

updateTime ();
</script>
</svg>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.