SVG Path.getPointAtLength returning wrong values

Question

I'm writing an application that uses SVG for displaying information and using a <path> to arrange a dynamic amount of positions on an ellipse. However points in the lower left corner were coming out past where they should be. So I wrote a quick script to check where the points are and made this (inserted via the Chrome JS console:

a = document.getElementById("svg-table-underlay");
len = a.getTotalLength();
for (i = 0; i < len - 1; i++) {
    line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttributeNS(null, "x1", a.getPointAtLength(i).x);
    line.setAttributeNS(null, "y1", a.getPointAtLength(i).y);
    line.setAttributeNS(null, "x2", a.getPointAtLength(i + 1).x);
    line.setAttributeNS(null, "y2", a.getPointAtLength(i + 1).y);
    line.setAttributeNS(null, "style", "stroke:#ff0000; stroke-width:3;");
    document.getElementById("svg-dragto").appendChild(line);
}

The path with ellipse is represented as this

<path d="M 212,250 A 300,140 0 1 0 212,249 Z" id="svg-table-underlay" fill="url(#wood)" />

I found my problem: the points in the lower left corner are calculated oddly causing the getPointAtLength() function to return points that are not correct. However the ellipse itself is drawn correctly. What could be the cause of this and are there anyways to get around it? (I'm using Chrome 21 and this only has to work in WebKit browsers)

Answer 1

You can draw the ellipse with two arcs...

<path d="M 20, 200
        a 300,140 0 1,0 600,0
        a 300,140 0 1,0 -600,0
        z " id="svg-table-underlay" fill="#000" />

Where 300 is rx, 140 is ry, and 600 is rx * 2

http://jsfiddle.net/z6tTY/