使用单独的SVG图像创建时钟

Question

我有两个单独的图像。一个是没有箭头的时钟，另一个是时钟箭头。两者都是SVG图像（矢量）。

我需要在Web应用程序中创建一个时钟，其中箭头的360度旋转取决于时间变量。例如，如果时间变量= 2分钟，则箭头必须在2分钟内旋转整个圆圈。

以下是示例图片：

这样做的最佳方法是什么？

• HTML5 Canvas
• jQuery

  

非常感谢任何帮助。

Answer 1

您提供的图像不是矢量，也不是分开的，但这是基本的想法：

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(http://i.stack.imgur.com/qjlyA.png);
  background-size: cover
}

div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-image: url(http://i.stack.imgur.com/qjlyA.png);
  background-size: cover;
  background-position: top right;
  animation: rot 2s linear 0s infinite;
  transform-origin: bottom right;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div>
  <div style="animation-duration: 5s"></div>
</div>