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

Question

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

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

这里有样本图像：

什么是做到这一点的最好办法？

• HTML5画布
• 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>