您想使用橢圓Arc命令。不幸的是，這需要你指定起點和終點的笛卡爾坐標(x，y)而不是你擁有的極坐標(半徑，角度)，所以你必須做一些數學運算。這是一個應該工作的JavaScript函數(雖然我還沒有測試過)，我希望它是相當不言自明的：function?polarToCartesian(centerX,?centerY,?radius,?angleInDegrees)?{

var?angleInRadians?=?angleInDegrees?*?Math.PI?/?180.0;

var?x?=?centerX?+?radius?*?Math.cos(angleInRadians);

var?y?=?centerY?+?radius?*?Math.sin(angleInRadians);

return?[x,y];}

哪個角度對應于哪個時鐘位置將取決于坐標系;?只需交換和/或否定sin / cos術語。

arc命令具有以下參數：rx,?ry,?x-axis-rotation,?large-arc-flag,?sweep-flag,?x,?y

第一個例子：

rx=?ry= 25且x-axis-rotation= 0，因為你想要一個圓而不是一個橢圓。您可以使用上面的函數分別計算起始坐標(您應該過去M)和結束坐標(x，y)，分別得出(200,175)和約(182.322,217.678)。到目前為止，鑒于這些限制，實際上可以繪制四個弧，因此兩個標志選擇其中一個。我猜你可能想要large-arc-flag在減小角度的方向上繪制一個小弧(意思是= 0)(意思是sweep-flag= 0)。總之，SVG路徑是：M?200?175?A?25?25?0?0?0?182.322?217.678

對于第二個示例(假設您指的是相同的方向，因此是一個大弧)，SVG路徑是：M?200?175?A?25?25?0?1?0?217.678?217.678

我再次測試過這些。

(編輯2016-06-01)如果像@clocksmith一樣，您想知道他們為什么選擇這個API，請查看實施說明。他們描述了兩種可能的弧參數化，“端點參數化”(他們選擇的那個)和“中心參數化”(這就像問題所用的那樣)。在“端點參數化”的描述中，他們說：端點參數化的一個優點是它允許一致的路徑語法，其中所有路徑命令都以新的“當前點”的坐標結束。

所以基本上它是弧的副作用被視為更大路徑的一部分而不是它們自己的獨立對象。我想如果你的SVG渲染器不完整，它可以跳過它不知道如何渲染的任何路徑組件，只要它知道它們采用了多少個參數。或者它可以實現具有許多組件的路徑的不同塊的并行渲染。或許他們這樣做是為了確保舍入錯誤不會沿著復雜路徑的長度積累。

實現說明對于原始問題也很有用，因為它們有更多的數學偽代碼用于在兩個參數化之間進行轉換(我在第一次寫這個答案時沒有意識到)。

總結

以上是生活随笔為你收集整理的path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。