javascript - SVG Path.getPointAtLength 返回错误值

Question

我正在编写一个应用程序，它使用 SVG 来显示信息并使用 <path>在椭圆上安排动态数量的位置。然而，左下角的点超出了它们应该在的位置。所以我写了一个快速脚本来检查点的位置并做了这个(通过 Chrome JS 控制台插入:

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

带有椭圆的路径表示为

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

我发现了我的问题:左下角的点被奇怪地计算，导致 getPointAtLength() 函数返回不正确的点。然而，椭圆本身是正确绘制的。这可能是什么原因，有什么办法可以解决吗？ (我使用的是 Chrome 21，这只适用于 WebKit 浏览器)

Answer 1

您可以用两条弧线绘制椭圆...

<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" />

其中 300 是 rx , 140 是 ry , 600 是 rx * 2
http://jsfiddle.net/z6tTY/