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

你几乎钉了它。重要的是使用旋转指令的绝对版本（“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 );
}

不要忘记您可以将转换和路径作为数组传递 - 如果您不必担心在参数之间连接逗号分隔符，则可以很容易地构造参数。