#### 1、问题描述 弧旋转的中心点并非rotate-origin指定的点，而是svg画布的左上角原点；弧旋转一周后便停止不再旋转 #### 2、问题原因 首先，谷歌40不支持以css3方式设置的变化原点，如果要设置就必须采用d3的方式来指定。其次，d3的动画最终都会在指定的属性的结束状态停止，要实现永久动画需要另外处理。 #### 3、解决方案 ##### 3.1、第一个问题，使用d3设置transform属性值的方式指定旋转角度、旋转原点； ##### 3.2、调用d3选择集的each(‘end’,function(){})方法在每次动画结束时继续调用插值计算函数，从而形成永久动画： ```javascript //定义弧逆时针旋转动画 ! function arcAnimation() { arcGroups .attr('transform', 'rotate(0)') .transition() .ease('linear') .duration(10000) .attrTween("transform", rotTween) .each('end', arcAnimation) }() //动画回调函数 function rotTween() { var i = d3.interpolate(0, -360); return function(t) { return "rotate(" + i(t) + " " + center[0] + " " + center[1] + ")"; } } ```