별도의 SVG 이미지가있는 시계 만들기

Question

두 개의 이미지가 있습니다. 하나는 화살표가없는 시계이고 다른 하나는 시계 화살표입니다. 둘 다 SVG 이미지 (벡터)입니다.

화살표의 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>