#### 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] + ")"; } } ```