SVG 순환 애니메이션 흔들림을위한 SVG 순환 애니메이션

SVG 이미지의 Inkscape SVG 출력에 문제가있는 것으로 보입니다. 변환 행렬이 원의 약간의 흔들림을 유발하는 것 같습니다. 나는 수학적으로 관심을 쏟지도 않을 것이며 앞으로도이를 교정 할 수있는 방법을 찾지 못해 흔들리지 않는다.SVG 순환 애니메이션 흔들림을위한 SVG 순환 애니메이션

SVG animateTransform뿐 아니라 CSS3 애니메이션도 모두 시도했습니다. 둘 다 똑같이 행동합니다. 변환 매트릭스를 편집하여 워블을 변경할 수 있지만 상황이 악화됩니다.

간결함을 위해 여기 웹킷 전용 CSS를 사용했습니다. 내가 여기에 바이올린을 만들었습니다

은 : http://jsfiddle.net/slwfleming/KGZns/

<div class="box"> 
    <div class="rotateme"> 
    <svg class="refresh-status1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" viewBox="0 0 18 18"> 
     <g transform="translate(0,1.5)"> 
     <g transform="matrix(3.239515,0,0,3.239515,-78.803548,-173.89306)"> 
      <path d="m 28.973,54.655 -0.419,0.008 c 0.63,0.787 0.589,1.937 -0.14,2.667 -0.633,0.633 -1.583,0.746 -2.338,0.356 l -0.422,0.13 0.04,0.421 c 1.02,0.571 2.328,0.435 3.195,-0.433 0.968,-0.968 1.028,-2.489 0.2,-3.539 l -0.116,0.39 z"></path> 
      <path d="m 25.437,57.162 c -0.63,-0.787 -0.59,-1.937 0.141,-2.667 0.633,-0.633 1.583,-0.746 2.337,-0.355 l 0.422,-0.13 -0.039,-0.421 c -1.02,-0.572 -2.328,-0.435 -3.194,0.432 -0.97,0.97 -1.029,2.49 -0.201,3.54 l 0.115,-0.39 0.419,-0.009 z"></path> 
     </g> 
    </g> 
    </svg> 
    </div> 
</div> 


.box { 
    border:1px solid #c00; 
    width:2rem; 
    height:2rem; 
    position:relative; 
} 

@-webkit-keyframes rotateRefresh { 
    0% { 
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); 
    } 
} 

.rotateme { 
    width:35px; 
    height:35px; 
    -webkit-animation:rotateRefresh 4s linear infinite; 
    position:absolute; 
    top:0; 
    left:0; 
} 

.refresh-status1 { 
    width:35px; 
    height:35px; 
}

출처

2014-04-22 Sherri Wyche Fleming