在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！

我期望的是這兩條路徑是重合的。當我translate(300, 200)我預計M0, 0將筆放置在300,200。但它沒有！它將筆放置在其他地方，使得所得到的路徑的中心在300,200處捲起。

那麼，我該如何製作一個路徑並將它的位置絕對置於紙張內？

（或者，我要計算我的路的中心，由該中心偏移所有的路徑值？請不要說「是」）

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

You can scale with a center，所以scale(100, 100, 0, 0)是解。