Javascript 在拉斐尔SVG中，翻译路径是否意味着；移动中心“；不是"；移动原点“；？

代码如下：

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

不是300200

我所期望的是这两条路径是重合的。当我翻译（300200）时，我希望

M0，0

会将笔放置在300200。但事实并非如此！它将笔放置在其他位置，以使生成路径的中心在300200处结束

那么，我如何在纸上画出一条路径并将其定位在

M0

的绝对位置

---

（或者，我必须计算路径的中心并用该中心偏移所有路径值吗？请不要说“是”）

您的问题是在蓝线上使用

.scale（100100）

，该蓝线从（300200）的中心点在两个方向上水平调整整条线的大小

只需将您的最后一行与以下内容交换：

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

让蓝线覆盖红线

---

这里有一个解决方案：

您的问题是在蓝线上使用

.scale（100100）

，它从（300200）的中心点在两个方向上水平调整整条线的大小

只需将您的最后一行与以下内容交换：

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

让蓝线覆盖红线

这里是解决方案的提琴：

，所以

刻度（100,100,0,0）

是解决方案。

，所以

刻度（100,100,0,0）

是解决方案