过渡破坏 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 上找到它。

正如上面摘录中的评论所暗示的那样，这一切都适用于 rotate 函数的 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) 的旋转？
还有其他解决方法吗？
更改 path 元素属性的 transform-origin 似乎不起作用，但也许我做错了。
我正在寻找无 CSS 的解决方案。这是一个我不能在项目中否决的架构决定。
如您所见，D3 已经包含在该项目中，但我希望尽可能少地使用额外的外部库。

提前致谢！

Answer 1

创建圆心为 (0,0) 的圆弧。然后将其平移到圆心。然后 d3 转换将很好地工作如下：

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

过渡破坏 SVG 旋转

Transition destroys SVG rotation

javascript

svg

transition

rotation