5

我正在编写一个应用程序，它使用 SVG 来显示信息并使用 a<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 浏览器）

路径追踪奇数

4

1 回答 1

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/

于 2012-09-04T09:04:38.647 回答