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

那么，我怎样才能创造一条路径并将其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

You can scale with a center，因此scale(100, 100, 0, 0)就是解决方案。