javascript - SVG Path.getPointAtLength 返回错误的值

我正在编写一个应用程序，它使用 SVG 显示信息并使用 <path> 在椭圆上排列动态数量的位置。然而，左下 Angular 的点超出了它们应有的位置。所以我写了一个快速脚本来检查点在哪里并做了这个(通过 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)" />

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

最佳答案

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

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

关于javascript - SVG Path.getPointAtLength 返回错误的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12253855/