第 22 天：如何使用 SVG 和 JavaScript 绘制能显示实际时间的时钟

与其他 HTML 元素一样，SVG 元素也可以通过 JavaScript 进行操作。在本例中，我们使用一段简短的代码来显示时钟上的实际时间。我们使用 getElementById 设置在 JavaScript 中获取的时和分，然后用按当前时间利用transform 属性旋转设置时针 。

这里还有一个值得一提的小窍门。这里显示每个小时的点被画成虚线圆圈。这与我们为常规 HTML 元素设置 border-style CSS 属性的原理类似，但更加复杂。在 SVG 中，我们可以使用 stroke-dasharray 属性微调每个虚线段的长度和中间的空间。我们还可以使用 stroke-dashoffset 设置偏移量。在这里，我们就是用它来显示每个小时的圆点。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <rect x="-100" y="-100" width="200" height="200" fill="#CD803D" />

  <circle r="55" stroke="#FCCE7B" stroke-width="10" fill="white" />

  <circle
    r="45"
    stroke="#B6705F"
    stroke-width="6"
    stroke-dasharray="6 17.56194490192345"
    stroke-dashoffset="3"
    fill="none"
  />

  <g stroke="#5f4c6c" stroke-linecap="round">
    <line id="hours" y2="-20" stroke-width="8" />
    <line id="minutes" y2="-35" stroke-width="6" />
  </g>
</svg>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    const hoursElement = document.getElementById("hours");
    const minutesElement = document.getElementById("minutes");

    const hour = new Date().getHours() % 12;
    const minute = new Date().getMinutes();

    hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
    minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
  });
</script>
分享：