Как эффективно отменить анимацию SVG (SMIL) на дорожке движения?

Question

Я пытаюсь определить, как эффективно отменить эту анимацию SVG (с SMIL), которая использует animateMotion и атрибут d на элементе path. Мне нужна анимация для вращения против часовой стрелки вокруг фигуры.

Текущую анимацию можно найти 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> 

Я понимаю, что можно переключить вручную команды данных SVG-путь, в том числе MoveTo (М, м), LineTo (L, L), curveto (С, с) и т.д.

Учитывая количество координаты пути, которые мне нужно будет отменить (в дополнение к тем, что в этой анимации), я пытаюсь определить, есть ли более эффективный способ сделать это.

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 прослушивается.

Update:

Я нашел ошибку Chrome, связанные с этим: https://code.google.com/p/chromium/issues/detail?id=353108

Кажется keyTimes нарушается, если calcMode является "шагают" (который по умолчанию используется). Если изменить его на что-то другое, как «линейный: анимация корректно работает в Chrome также

<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

.