svg - パスとサブパスは円弧曲線を同じ方法で管理しません

Question

Raphael で円弧曲線を生成する際に問題が発生しています。

ここで縮小された例を作成しました: http://jsfiddle.net/vaxilart/m6cHw/3/

ご覧のとおり、描画された最初のパスは 2 番目のパスと同じではなく、2 番目のパスは最初のパスのサブパスにすぎません。

なぜ両者が違うのか知っていますか？そして、どうすればこの問題を解決できますか?

コードは次のとおりです。

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