使用JS操作SVG示例--时钟

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <title>Document</title>
 </head>
 <body>
	<div id="" class="">
		<span>Open Time : <input type="text" id="time" size="25" /></span>
		<br><br>
	</div>
	<div id="" class="" style="height:500px">
		<svg style="height:400px;width:400px"  viewBox="-2 -2 402 402" id="svgclock">
		<circle cx="150" cy="150" r="150" style="fill:rgba(255,255,255,1);stroke:rgb(0,0,0);stroke-width:2"></circle>
		
		<g style="fill:rgb(0,0,0);font-weight:bold;font-size:1.3em">
			<text x="137" y="20">12</text>
			<text x="145" y="295">6</text>
			<text x="5" y="158">9</text>
			<text x="285" y="158">3</text>
		</g>
		<g style="fill:rgb(0,0,0);font-weight:bold;font-size:1em">
			<text x="215" y="35">1</text>
			<text x="267" y="87">2</text>
			<text x="267" y="225">4</text>
			<text x="215" y="278">5</text>
			<text x="75" y="278">7</text>
			<text x="25" y="225">8</text>
			<text x="25" y="90">10</text>
			<text x="75" y="38">11</text>
		</g>

		<circle cx="150" cy="150" r="3" style="fill:rgba(255,255,255,1);stroke:rgb(0,0,0);stroke-width:3"></circle>

		<line id="_hour" x1="150"y1="170" x2="150" y2="80" stroke="rgba(0,0,0,1)" stroke-width="4">
			<!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="43200s" repeatCount="indefinite"  />  -->
		</line>
		<line id="_min" x1="150"y1="170" x2="150" y2="40" stroke="rgba(0,0,0,1)" stroke-width="4">
			<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="3600s" repeatCount="indefinite" /> 
		</line>
		<line id="_sec" x1="150"y1="170" x2="150" y2="40" stroke="red" stroke-width="2">
			<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="60s" repeatCount="indefinite"  /> <!-- repeatCount="indefinite"  fill="freeze" -->
		</line>
		
		<rect width="100px" height="20px" x="100" y="220" style="fill:rgba(255,255,255,0);stroke:rgba(0,0,0,1);stroke-width:2px"></rect>
		<text x="105" y="235">2016-11-15</text>
		<circle cx="150" cy="150" r="2" style="fill:rgba(0,0,0,1);stroke:rgb(255,0,0);stroke-width:1"></circle>
	</svg>
	 <script type="text/javascript">
  <!--
	$(document).ready(function(){
		$("#time").val(new Date());
		var currentTime, hour, minute, second;
		currentTime = new Date();
		second = currentTime.getSeconds();
		minute = currentTime.getMinutes();
		hour = currentTime.getHours();
		hour = (hour > 12)? hour - 12 : hour;
		hour = (hour == '00')? 12 : hour;

		var line = document.getElementById("_sec");
		var fromRotate = second*6;
		var toRotate = fromRotate+360;
		line.setAttribute("transform","rotate("+fromRotate+" 150,150)");
		line.childNodes[1].setAttribute("from",fromRotate+" 150 150");
		line.childNodes[1].setAttribute("to",toRotate+" 150 150");
		
		line = document.getElementById("_min")
		fromRotate = minute*6 + (second/60)*6;
		toRotate = fromRotate+360;
		line.setAttribute("transform","rotate("+fromRotate+" 150,150)");
		line.childNodes[1].setAttribute("from",fromRotate+" 150 150");
		line.childNodes[1].setAttribute("to",toRotate+" 150 150");

		line = document.getElementById("_hour")
		fromRotate = hour*30 + (minute/60)*30;
		toRotate = fromRotate+360;
		line.setAttribute("transform","rotate("+fromRotate+" 150,150)");
		line.childNodes[1].setAttribute("from",fromRotate+" 150 150");//下标取1是因为换行符也被算作一个node
		line.childNodes[1].setAttribute("to",toRotate+" 150 150");
	});
  //-->
  </script>
	</div>
 </body>
</html>