간단한 번역 : snap.svg

Question

방금 ​​svg 그래픽 애니메이션을 살펴보기 시작했고 매우 복잡해 보입니다.

겉으로보기에는 간단한 문제에 붙어 있습니다. 엘리먼트를 새로운 장소에 애니메이트하고 싶지만, 설정된 시간에 엘리먼트를 만들고 싶습니다.

내가 변경할 때 현재 코드로 표시되는 매트릭스 속성을 얻을 수 있지만 수정할 수 없습니다. 설정 한 시간만큼 왼쪽에서 개체를 애니메이션하는 방법을 알고있는 사람이 있습니까?

    window.onload = function() { 
        var s = Snap(100, 100); 
        Snap.load("http://new.beresponsive.co.za/wp-content/themes/responsive/flatui/images/icons/responsive.svg", function (f) { 

         redSomething = f.select("#phone"); 

         redSomething.hover(function() { 
          redSomething.animate({ 
           'transform': 'matrix(3.333, -0.000, 0.000, 3.333, 66.667, 66.667)' 
          }, 2000); 
         }); 

         s.append(f); 
        }); 

       }; 

Answer 1

매트릭스를 사용함에 따라 느낌이 복잡하다고 생각합니다. 왜 여기에 필요한지 알 수 없습니다. '간단한'해결책은 문자열 't'= 번역에서

redSomething.animate({ transform: 't100,0' }, 2000); 

을하는 것, 그리고 100,0 오른쪽으로 × 100으로 이동합니다.

변형이 이미 적용된 경우 현재 끝 부분에 문자열을 추가해 볼 수는 있지만 회전이 이미 있거나 무언가이며 오른쪽으로 이동하려면 조금 복잡합니다.