Paths and subpath don't manage the arc curve the same way - svg

Question

I'm having issue with generating arc curves with Raphael.
I created a reduced example here: http://jsfiddle.net/vaxilart/m6cHw/3/
As you can see, the first path drawn isn't the same as the second one, and the second one is only a subpath of the first.
Do you know why both are different? And how could I resolve this issue?
Here's the code:
function drawpath( canvas, bg, pathstr, duration, attr, callback ) {
var guide_path = bg;
var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
var total_length = guide_path.getTotalLength( guide_path );
var last_point = guide_path.getPointAtLength( 0 );
var start_time = new Date().getTime();
var interval_length = 50;
var result = path;
var run = function run() {
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath( 0, this_length );
path.attr({ path: subpathstr });
if ( elapsed_time >= duration ) {
if ( callback != undefined ) callback();
} else {
requestAnimationFrame(run);
}
};
run();
return result;
}
var sequence_path = [
[ "M", 200, 0 ],
[ "V", 200 ],
[ "A", 100, 100, 90, 0, 0, 300, 300 ],
[ "H", 400 ],
[ "A", 100, -100, 90, 0, 0, 500, 400 ],
[ "V", 500 ],
[ "A", 100, -100, 90, 0, 0, 400, 600 ],
[ "H", 200 ],
[ "A", 100, 100, 90, 0, 0, 100, 700 ],
[ "V", 800 ]
];
var paper = Raphael(10, 50, 700, 1000);
var bg = paper.path(sequence_path).attr({
stroke: 'white',
'stroke-width': 64,
'stroke-opacity': 1,
fill: 'none',
'fill-opacity': 0
});
drawpath( paper, bg, sequence_path, 3500, {
stroke: 'orange',
'stroke-width': 64,
'stroke-opacity': 1,
fill: 'none',
'fill-opacity': 0
});

Answer 1

Looks like Raphael's getSubpath method has a bug where it misinterprets the Large Arc Flags and Sweep Flags of a couple of those curves. I might be wrong.
Edit: OK I was wrong. You have some bad Arcs (A) that are breaking something somewhere between Raphael and the browser, not sure where. But the problem is:
You are setting negative y-radius on the two Arcs that get messed up. Radius cant be negative. in your sequence_path definition, change those two -100's to 100 (positive 100 y radius). updated fiddle: http://jsfiddle.net/m6cHw/4/
If you're going to be hand-writing a lot of paths, I suggest you read the standards specs on how to define them: http://www.w3.org/TR/SVG/paths.html. I tried to avoid reading that for a while but eventually I bit the bullet and went through it. It's weird stuff but you need to understand it if you want to make paths do what you want.