別々のSVG画像で時計を作成する

Question

私は2つの別々の画像を持っています。 1つは矢印のない時計で、もう1つは時計の矢印です。どちらもSVG画像（ベクトル）です。

私は、矢印の360回転が時間変数に依存するWebアプリケーションの時計のように作成する必要があります。例えば、時間変数= 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>