Как установить начало вращения для анимации raphael.js?

Question

Я 8 дорожек генерироваться таким образом:

for (i = 0 ; i<8; i++){ 
    slices[i] = card.path("M320 120 L320 215").attr({"stroke" : "#00A5Df", 
      "stroke-width" : 10}); 
} 

Я хочу, чтобы повернуть от происхождения M320 120 (начало строки) в направлении по часовой стрелке, чтобы произвести эффект «пирог»:

for (i = 0 ; i<8; i++){ 
    slices[i].animate({transform :"r"+45*(i+1)+""},(200*i)); 
} 

Вместо используемого источника находится центр линии. Я пробовал форматирование строки, как

"r45 cx320 cy120" 

и другие комбинации, но значения всегда игнорируются.

редактировать: здесь скрипку, которая более четко подчеркивает мою проблему: http://jsfiddle.net/vMRdj/

Answer 1

Вы почти прибил его. Важно использовать абсолютную версию директивы rotate («R» вместо «r») и явно указать начало координат, используя формат «R (градус) (origin-x), (origin-y)», ,

Вот код:

for (i = 0 ; i<8; i++){ 
    slices[i].animate({transform : ["R", 45*(i+1), 320, 120 ] }, i * 125); 
} 

И скрипка: http://jsfiddle.net/kevindivdbyzero/F4xhh/

Не забывайте, что вы можете передать и преобразовать пути как массивы - это делает его намного легко структурировать параметры, если вам не нужно беспокоиться о конкатенации разделителей запятой между аргументами.