SVG Path.getPointAtLength返回錯誤的值

我正在編寫一個應用程序，它使用SVG顯示信息並使用<path>在橢圓上排列動態數量的位置。然而，左下角的點數已經超出了他們應有的位置。所以我寫了一個快速的腳本來檢查，其中點是它並使它（通過Chrome JS控制檯插入：SVG Path.getPointAtLength返回錯誤的值

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瀏覽器中運行）

Path Tracing Oddness

來源

2012-09-03 petschekr

你需要什麼爲什麼？中風（一部分？）橢圓？如果是這樣的話，你可以使用stroke-dasharray和stroke-dashoffset代替創建線條。 –

我需要線條從一個圓圈到另一個圓圈的邊緣開始和結束。放置也必須是動態的（沒有靜態座標），因爲可以有不同數量的圓圈。 – petschekr

像http://jsfiddle.net/9KjED/？ –

你可以用兩個圓弧繪製橢圓...

<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-04 09:04:38 Duopixel

SVG Path.getPointAtLength返回錯誤的值

回答

相關問題