用SVG实现一个时钟早上翻犀牛书的时候在多媒体和图形编程的章节偶尔发现有关于用`SVG`实现一个动态时钟，感觉挺有意思，

前言

早上翻犀牛书的时候在多媒体和图形编程的章节偶尔发现有关于用`SVG`实现一个动态时钟，感觉挺有意思，记录一下。

效果图

先看一下效果图吧 , 代码贴在下面了 , 有兴趣的可以看一下~

代码实现

`html`

<body onload="updateTime()">
  <!-- viewBox是坐标系,width和height是指屏幕大小 -->
  <svg id="clock" viewBox="0 0 100 100" width="500" height="500">
  <defs>
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="sourceAlpha" stDeviation="1" result="blur"/>
        <feOffset in="blur" dx="1" dy="1" result="shadow" />
        <feMerge>
          <feMergeMode in="SourceGraphic"/>
          <feMergeMode in="shadow"/>
        </feMerge>
    </filter>
  </defs>
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="ticks">
    <line x1="50" y1="5.000" x2="50.00" y2="10.00"/>
    <line x1="72.50" y1="11.03" x2="70.00" y2="15.36"/>
    <line x1="88.97" y1="27.50" x2="84.64" y2="30.00"/>
    <line x1="95.00" y1="50.00" x2="90.00" y2="50.00"/>
    <line x1="88.97" y1="72.50" x2="84.64" y2="70.00"/>
    <line x1="72.50" y1="88.97" x2="70.00" y2="84.64"/>
    <line x1="50.00" y1="95.00" x2="50.00" y2="90.00"/>
    <line x1="27.50" y1="88.97" x2="30.00" y2="84.64"/>
    <line x1="11.03" y1="72.50" x2="15.36" y2="70.00"/>
    <line x1="5.000" y1="50.00" x2="10.00" y2="50.00"/>
    <line x1="11.03" y1="27.50" x2="15.36" y2="30.00"/>
    <line x1="27.50" y1="11.03" x2="30.00" y2="15.36"/>
  </g>
  <g id="numbers">
    <text x="50" y="18">12</text><text x="85" y="53">3</text>
    <text x="50" y="88">6</text><text x="15" y="53">9</text>
  </g>
  <g id="hands" >
    <line id="hourHand" x1="50" y1="50" x2="50" y2="24" />
    <line id="minHand" x1="50" y1="50" x2="50" y2="20" />
    <line id="secHand" x1="50" y1="50" x2="50" y2="16" />
  </g>
  </svg>
</body>

`css`

#clock{
      stroke: black;
      stroke-linecap: round;
      fill: #eef;
    }
    #face{
      stroke-width: 3px;
    }
    #ticks{
      stroke-width: 2;
    }
    #hourHand{
      stroke-width: 5px;
    }
    #minHand{
      stroke-width: 3px;
    }
    #secHand{
      stroke-width: 1px;
    }
    #numbers{
      font-family: sans-serif;
      font-size: 7pt;
      font-weight: bold;
      text-anchor: middle;
      stroke: none;
      fill: black;
    }

`js`

 //更新SVG始终来显示当前时间
    function updateTime(){
     let now = new Date();                        //当前时间
     let min = now.getMinutes();                  //分钟
     let sec = now.getSeconds();                  //秒
     let hour = (now.getHours() % 12) + min / 60; //转换成可以在时钟上显示的时间
     let minAngle = min * 6;                      //每6°表示一分钟
     let secAngle = sec * 6;                      //每6°表示一秒
     let hourAngle = hour * 30;                   //每30°表示一个小时

     //获取表示时钟和分针的svg元素
     let minHand = document.getElementById("minHand");
     let hourHand = document.getElementById("hourHand");
     let secHand = document.getElementById("secHand");
    
     //设置这些元素的SVG属性,将他们移动到钟面上
     minHand.setAttribute("transform" , "rotate(" + minAngle + ",50,50)");
     hourHand.setAttribute("transform" , "rotate(" + hourAngle + ",50,50)");
     secHand.setAttribute("transform" , "rotate(" + secAngle + ",50,50)");
    
     //每一分钟更新下时钟的时间
      setTimeout(updateTime , 1000);
    }