Question

Here’s the code:

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)
})

Here’s the result in Chrome:

Notice that the blue line’s M0 0 is not at 300,200!

What I expect is that the two paths would be coincident. When I translate(300, 200) I expect that M0, 0 will place the pen at 300,200. But it doesnt! It places the pen somewhere else such that the center of the resulting path winds up at 300,200.

So, how can I make a path and position it’s M0 0 absolutely within the paper?

(Or, do I have to compute the center of my path and offset all the path values by that center? Please do not say “yes”)

Answer 1

Your problem is that you use .scale(100, 100) on your blue line which resizes the whole line horizontally in both directions FROM the center point of (300, 200);

Simply exchange your last line with:

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

to have the blue line cover the red one

Here is a fiddle for the solution: http://jsfiddle.net/QfAsY/