svg animateTransform 동시에 여러 애니메이션 트리거

Question

다음 예제에서는 모든 애니메이션을 동시에 실행해야합니다. 그러나 작품은 마지막 작품입니다.

<g> 
    <animateTransform attributeName="transform" attributeType="XML" 
    type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" /> 

    <animateTransform attributeName="transform" attributeType="XML" 
         type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" /> 

    <animateTransform attributeName="transform" attributeType="XML" 
         type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" /> 

    <image x="0" y="0" width="200" height="200" xlink:href="<?php echo $cck->getValue('project_icon'); ?>" /> 
</g> 

조치 JS에 의해 트리거되었습니다

var animations = $($this).find('animateTransform'); 
animations[0].beginElement(); 
animations[1].beginElement(); 
animations[2].beginElement(); 

Answer 1

당신은 스크립트에서 몇 가지 오류가 있습니다

이 = "무기한"시작을

해야한다 :

반복 횟수는 세미콜론으로 지난 값을 분리 잊어 회전 값 = "무기한"

당신은 에 추가 세미콜론 부분을 번역합니다. 당신이 (더 먼저 변환이를 추가 할 필요)

첨가제 = "합"

것은 그래서 코드를 보여야을 추가하지하여 결과를 요약해야 할 몇 가지 변환을 실행하기 위해

like :

<g> 
    <animateTransform attributeName="transform" attributeType="XML" 
     type="rotate" values="2 100 100;-1 100 100;1 100 100;-0.5 100 100;0.5 100 100" repeatCount="indefinite" dur="0.35s" fill="freeze" /> 

    <animateTransform attributeName="transform" attributeType="XML" 
         type="scale" values="1;1.2;1" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/> 

    <animateTransform attributeName="transform" attributeType="XML" 
         type="translate" values="0 0;-100 -100;0 0" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/> 

    <image x="0" y="0" width="200" height="200" xlink:href="<?php echo $cck->getValue('project_icon'); ?>" /> 
</g> 

이미지를 0.5도 회전하면 눈에 띄지 않으므로 왜 귀찮을까요?! 여기

당신이 그것에 대해 자세한 내용을보실 수 있습니다 : SVG-SMIL animation tutorial