Untitled

<html>
	<head>
		<title>Analoge Uhr in SVG</title>
		<script>

			var svg_open="<?xml version='1.0' ?><svg viewBox='0 0 300 300' width='300' height='300' xmlns='http://www.w3.org/2000/svg'>";
			var svg_stat="";
			var svg_zeig="";
			var svg_end="</svg>";

			function zifferblatt()
			{
				svg_stat="<circle cx='150' cy='150' r='145' fill='#000000' />";
				svg_stat=svg_stat+"<circle cx='150' cy='150' r='140' fill='#0fff0f' />";


				var step=3.14159*2/12;
				var cx=0;
				var cy=0;
				var svg_point="";

				for(var i=0; i<12; i++)
				{
					cx=145+Math.sin(i*step)*130;
					cy=155-Math.cos(i*step)*130;

					//svg_point="<circle cx='"+cx+"' cy='"+cy+"' r='4' fill='#000000'/>";

					zz=i; if (i==0) {zz=12;}
					svg_point="<text x='"+cx+"' y='"+cy+"' fill='#000000'>"+zz+"</text>";

					svg_stat=svg_stat+svg_point;
				}
			}

			function zeiger()
			{
				var zeit=new Date();
				var sekunde=zeit.getSeconds();
				var minute=zeit.getMinutes();
				var stunde=zeit.getHours();
				var step12=(3.14159*2)/12;
				var step60=(3.14159*2)/60;
				var px=0;
				var py=0;

				px=150+Math.sin(sekunde*step60)*120;
				py=150-Math.cos(sekunde*step60)*120;

				svg_zeig="<path d='M 150 150 L "+px+" "+py+"' stroke-width='1' stroke='#ff0000'/>";

				px=150+Math.sin((minute+sekunde/60)*step60)*120;
				py=150-Math.cos((minute+sekunde/60)*step60)*120;

				svg_zeig=svg_zeig+"<path d='M 150 150 L "+px+" "+py+"' stroke-width='3' stroke='#0000ff'/>";

				px=150+Math.sin((stunde+minute/60)*step12)*90;
				py=150-Math.cos((stunde+minute/60)*step12)*90;

				svg_zeig=svg_zeig+"<path d='M 150 150 L "+px+" "+py+"' stroke-width='5' stroke='#000000'/>";
				svg_zeig=svg_zeig+"<circle cx='150' cy='150' r='5' fill='#000000' />";
			}

			function zeige_uhr()
			{
				zeiger();
				var svg=svg_open+svg_stat+svg_zeig+svg_end;
				svg=btoa(svg);
				document.getElementById('uhr').src="data:image/svg+xml;base64,"+svg;
			}

		</script>
	</head>
	<body>
		<hr>Analoge Uhr in SVG<hr>
		<img src='' id='uhr' width='300' height='300'>
		<script>
			zifferblatt();
			zeige_uhr();
			window.setInterval("zeige_uhr()",1000)
		</script>
	</body>
</html>