javascript控制SVG实现时钟效果

clock.svg

<svg id="root" width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1" onload="init()">
  <title>clock</title>
  <script type="application/ecmascript">
    <![CDATA[
      var clock;
      var hour, minute, second;
      function init() {
        var root = document.getElementById('root');
        var svgns = root.namespaceURI;
        var suspendHandlerID = root.suspendRedraw(1000);
        /* 表盘 */
        clock = document.createElementNS(svgns, 'circle');
        clock.setAttribute('cx', 125);
        clock.setAttribute('cy', 125  );
        clock.setAttribute('r', 100);
        clock.style.cssText = 'fill: white; stroke: black;';
        root.appendChild(clock);

        var hourTicksGroup = document.createElementNS(svgns, 'g');
        hourTicksGroup.setAttribute('transform', 'translate(125, 125)');
        root.appendChild(hourTicksGroup);

        var hourTick;
        for(var i=1; i<=12; i++) {
          hourTick = document.createElementNS(svgns, 'path');
          hourTick.setAttribute('d', 'M 95 0 L 100 -5 100 5 Z');
          hourTick.setAttribute('transform', 'rotate(' + (i * 30) + ')');
          hourTicksGroup.appendChild(hourTick);
        }

        var hourGroup = document.createElementNS(svgns, 'g');
        hourGroup.style.cssText = "stroke: black; stroke-width: 8px; stroke-linecap: round;";
        hour = document.createElementNS(svgns, 'path');
        hour.setAttribute('d', 'M 125 125 L 125 80');
        hour.setAttribute('transform', 'rotate(0, 125, 125)');
        hourGroup.appendChild(hour);
        root.appendChild(hourGroup);

        var minuteGroup = document.createElementNS(svgns, 'g');
        minuteGroup.style.cssText = "stroke: black; stroke-width: 5px; stroke-linecap: round;";
        minute = document.createElementNS(svgns, 'path');
        minute.setAttribute('d', 'M 125 125 L 125 70');
        minute.setAttribute('transform', 'rotate(0, 125, 125)');
        minuteGroup.appendChild(minute);
        root.appendChild(minuteGroup);

        var secondGroup = document.createElementNS(svgns, 'g');
        secondGroup.style.cssText = "stroke: black; stroke-width: 2px; stroke-linecap: round;";
        second = document.createElementNS(svgns, 'path');
        second.setAttribute('d', 'M 125 125 L 125 50');
        second.setAttribute('transform', 'rotate(0, 125, 125)');
        secondGroup.appendChild(second);
        root.appendChild(secondGroup);

        root.unsuspendRedraw(suspendHandlerID);

        updateClock();
      }

      function updateClock() {
        var date = new Date();
        var duration = date.getSeconds() + date.getMinutes() * 60 + date.getHours() * 3600;
        var secondDegree = date.getSeconds() * 6;
        var minuteDegree = date.getMinutes() * 6 + date.getSeconds() * 0.1;
        var hourDegree = date.getHours() * 30 + (date.getMinutes() * 60 + date.getSeconds()) * (30 / 3600);
        minute.setAttribute('transform', 'rotate(' + minuteDegree + ', 125, 125)');
        second.setAttribute('transform', 'rotate(' + secondDegree + ', 125, 125)');
        hour.setAttribute('transform', 'rotate(' + hourDegree + ', 125, 125)');
        requestAnimationFrame(updateClock);
      }
    ]]>
  </script>
</svg>