SVG弧溜走，因爲它完成它的弧形

Question

http://codepen.io/andrewplummer/pen/pyjjbJ

我試圖使一個圖形簡單的弧線。我已經閱讀了SVG中的「A a」弧，我相信我理解了這些細節，但是當弧接近它的原點時，它開始滑向右側，我無法弄清楚原因。

主要問題似乎在這裏：<path d="M75 5 A70 70 0 1 1 71 6" stroke="#3f51b5"></path>。當關閉點（71 76）接近原點（75 5）時，電弧開始向右移動。筆顯示更多細節...所有瀏覽器都顯示這種行爲，所以它似乎不是一個錯誤。

Answer 1

事實證明，這是致Math.ceil導致此問題。看起來，即使是最後x/y位置（svg A命令的最後2個參數）的小變化也可能對所產生的弧產生很大影響。當繪製更大的弧線時，這些較小的差異可能會產生更誇張的效果，所以@Paul LeBeau的回答有點正確。然而，簡單地說，不是四捨五入來解決問題並且完美呈現，因此看起來實際上一個弧線可以做到這一點，而不是四捨五入（對於用於蹩腳瀏覽器的老開發者來說，四捨五入的像素值是一種習慣習慣）。

Answer 2

arc命令有兩個標誌，附加的圖像應該解釋它。

你想繪製一個完整的圓？

Answer 3

如果您需要準確性，那麼不要嘗試用一條路徑弧命令繪製完整的360度弧。由於在描述弧線時沒有指定中心點，所以起點，終點和半徑組合之間的微小數學不準確性可能會導致弧線轉移相當驚人的數量。

我會建議保持你的弧度最大180度。對於較大的半徑，您可能希望更低，並將其限制在90度。