SVG圓弧不是沿着橢圓

我想用圓弧路徑繪製橢圓的一部分。但它不起作用，因爲我認爲它應該。這是代碼：SVG圓弧不是沿着橢圓

<svg fill="none" stroke="#f00" height="24" viewBox="0 0 24 24" 
    width="24" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M16 3.4a9.7 8.3 0 1 0-9.3 14.4"/> 
    <ellipse cx="12.2" cy="11" rx="9.7" ry="8.3" stroke="green" opacity=".5"/> 
</svg>

圖片：

紅色的路徑應遵循的綠色通道。

根據圓弧代碼a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy它應該對應於可以繪製的橢圓的一部分來滿足約束，作爲起點和終點以及兩個半徑。如您所見，通過點A和點B傳遞一個半徑爲9.7和8.3的綠色橢圓。爲什麼具有相同半徑和相同點的弧不符合它？

你能找到點A和B以及半徑應該是什麼，所以acr和綠色橢圓的部分完全一樣嗎？

這裏是codepen：https://codepen.io/anon/pen/eRXWLq

這是最接近我可以用完全不同的半徑得到：https://codepen.io/anon/pen/EXMXNN

來源

2017-07-14 kakaja

這是因爲你使用的是「掃標誌」設置爲0（逆時針），和「大弧」標誌設置爲1（繪製橢圓周圍兩個方向中較長的一個）。然而，橢圓上兩點之間的逆時針距離實際上是圍繞橢圓的兩個方向中的較短距離。

解決的辦法是改變「大圓弧」標誌，以0：

<svg fill="none" stroke="#f00" width="400px" viewBox="0 0 24 24" 
 
    width="24" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M16 3.4a9.7 8.3 0 0 0 -9.3 14.4"/> 
 
    <ellipse cx="12.2" cy="11" rx="9.7" ry="8.3" stroke="green" opacity=".5"/> 
 
</svg>

如果你想知道爲什麼弧仍然不完全準確，這將是兩種：

您的起點和終點都不準確。即不完全在橢圓上，或者數值不準確。查看此答案以獲取更多信息：How to render a svg circle using start and endAngle

來源

2017-07-14 15:38:40

SVG圓弧不是沿着橢圓

回答

相關問題