遷移が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）-centered回転が一部に置き換えます見えます（0,0）を中心とする回転を、ジオメトリで行うことができます。遷移後の位置と向きは実際にはまあまあです。しかし、変換中に、要素が面白いパス上を移動しています。例では、セクタが円を去っています。

これらの変換をすべて実行して、非（0,0）回のローテーションを適用する方法はありますか？
その他の回避策はありますか？
path要素属性の変換元を変更しても動作していないようですが、間違っていた可能性があります。
私はCSSフリーのソリューションを探しています。私はこのプロジェクトで却下できない建築上の決定です。
D3は既にプロジェクトに参加していますが、できるだけ追加の外部ライブラリを使用したいと思います。

ありがとうございます！

Answer 1

中心を（0,0）にして円弧を作成します。その後、それを円の中心に翻訳します。 次に、d3トランジションは次のようにうまく動作します：

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