javascript - 过渡破坏了 SVG 旋转

Question

我正在开发一个 JavaScript 项目，作为其中的一部分，尝试围绕给定点旋转 svg 路径元素。 这是 js 文件的简化示例:

var angle=0;
d3.select("#canvas")
  .append("path")
  .attr("id", "sector")
  .attr("fill", "red")
  .attr("d", "M150,150 L150,50 A100,100 0 0,1 236.6,200 Z")
  .on("click", function(){
    console.log("click");
    angle=(angle+120)%360;
    d3.select("#sector")
      .transition().duration(2500) //removing this line leads to a nice transform attribute in the resulting html
      .attr("transform","rotate("+angle+",150,150)");
  })

html 就是:

<svg id="canvas" width="300" height="300">
  <circle cx="150" cy="150" r="100" stroke="blue" fill="none"/>
</svg>

Here你可以在 JSfiddle 上找到它。

正如上面摘录中的评论所暗示的那样，它在旋转函数的 3 参数版本中工作得很好，我可以在其中指定要用作旋转中心的点的 x 和 y 坐标。生成的路径元素获得一个转换属性，其值为

"rotate(120,150,150)"

除非我想使用过渡。

当我插入有关转换的行时，转换会添加一些奇怪的额外内容，看起来像

"translate(354.9038105676658, 95.09618943233417) rotate(119.99999999999999) skewX(-3.1805546814635176e-15) scale(0.9999999999999999,0.9999999999999999)"

我猜想在后台，非 (0,0) 为中心的旋转会被一些平移和 (0,0) 为中心的旋转所取代，就像在几何中所做的那样。转换后的位置和方向确实很好。然而，在转换过程中，元素沿着一条有趣的路径移动，在示例中，扇形离开了圆。

有没有一种方法可以抑制执行所有这些转换的转换，而只应用单个基于非 (0,0) 的旋转？
还有其他解决方法吗？
更改路径元素属性的transform-origin似乎不起作用，但也许我做错了。
我正在寻找一个无 CSS 的解决方案。这是一个我无法在项目中否决的架构决策。
如您所见，D3 已参与该项目，但我希望使用尽可能少的额外外部库。

提前致谢!

Answer 1

创建圆心位于 (0,0) 的圆弧。然后将其平移到圆心。 然后 d3 转换将很好地工作，如下所示:

 d3.select("#sector")
  .transition().duration(2500)
  .attr("transform","translate(150,150)rotate("+angle+")");