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

答

这是因为你使用的是“扫标志”设置为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

SVG圆弧不是沿着椭圆

相关推荐