javascript - Raphael SVG では、パスの翻訳は「原点の移動」ではなく「中心の移動」を意味しますか?

Question

コードは次のとおりです。

Raphael('holder', 400, 400, function() {
    this.circle(200, 200, 100)
    this.circle(200, 200, 140)

    this.circle(0, 0, 1).translate(300, 200).scale(10).attr({fill: 'green'})
    this.circle(300, 200, 5).attr({fill: 'red'})
    this.path('M300,200 L400, 200').attr({stroke: 'red', 'stroke-width': 3})
    this.path('M0,0 L1,0').attr({stroke: 'blue'}).translate(300, 200).scale(100, 100)
})

Chrome での結果は次のとおりです。

青い線M0 0が 300,200 ではないことに注意してください!

私が期待しているのは、2 つのパスが一致することです。私translate(300, 200)が期待するM0, 0と、ペンは 300,200 になります。しかし、そうではありません！結果のパスの中心が 300,200 で巻き上げられるように、ペンを別の場所に配置します。

では、どうすればパスを作成し、それがM0 0完全に紙の中に収まるように配置できますか?

(または、パスの中心を計算し、その中心によってすべてのパス値をオフセットする必要がありますか?「はい」とは言わないでください)

Answer 1

問題は、.scale(100, 100)（300、200）の中心点から両方向に線全体のサイズを水平に変更する青い線で使用することです。

最後の行を次のものと交換するだけです。

this.path('M0,0 L100,0').attr({stroke: 'blue'}).translate(300, 200);

青い線が赤い線を覆うように

これが解決策のフィドルです：http：//jsfiddle.net/QfAsY/

Answer 2

center でスケーリングできるのでscale(100, 100, 0, 0)、ソリューションです。