모션 경로에서 SVG (SMIL) 애니메이션을 효과적으로 반전시키는 방법은 무엇입니까?

Question

path 요소에 animateMotion 및 d 속성을 사용하는이 SVG 애니메이션 (SMIL 사용)을 효율적으로 뒤집는 방법을 결정하려고합니다. 모양을 중심으로 반 시계 방향으로 애니메이션을 실행해야합니다.

현재 애니메이션은 here이며 관련 코드는 다음과 같습니다.

 <path fill="none" stroke="black" 
     d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0 
     c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/> 

     <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)"> 

     <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0 
     c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z" 
     begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze"> 

     </rect> 

는 I가 주어진 양 I 수동의 moveTo (M, m)에 lineTo (L, L)에 curveTo (C, C) 등

비롯한 SVG 경로 데이터 명령을 취소 할 수 있음을 이해 (이 애니메이션에있는 것 외에도) 뒤집을 필요가있는 경로 좌표 중 하나를 사용하여이 작업을 수행하는 더 효율적인 방법이 있는지 확인하려고합니다.

Answer 1

keyPoints 및 keyTimes 특성을 사용하여 애니메이션의 방향을 바꿀 수 있습니다.

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" 
       fill="freeze" keyPoints="1;0" keyTimes="0;1"> 

여기서 모션이 1 (경로 끝)에서 0 (경로 시작)으로 실행되도록 지정합니다.

Firefox에서 작동하지만 불행히도 Chrome에서는 작동하지 않습니다. Chrome이 도청 된 것으로 보입니다.

는 업데이트 : https://code.google.com/p/chromium/issues/detail?id=353108

calcMode는 "걸어 진"의 경우 keyTimes가 깨진 것 같다 (이 기본값) :

나는이 관련된 크롬 버그를 발견했다. 당신이 선형 "와 같은 다른 무언가로 변경하는 경우 : 애니메이션은 크롬에서 제대로 작동

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" 
       fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear"> 

Demo here

Updated Codepen here

.