SVG 圆弧不遵循椭圆

Question

我想用圆弧路径画一部分椭圆。但它不起作用，正如我认为的那样。这是代码：

<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和绿色椭圆的部分完全一样吗？

这是代码笔：https://codepen.io/anon/pen/eRXWLq

这是我用完全不同的半径所能得到的最接近的值：https://codepen.io/anon/pen/EXMXNN

Answer 1

这是因为您使用的 "sweep flag" 设置为 0（逆时针方向），并且 "large arc" 标志设置为 1（在椭圆周围绘制两种方式中较长的一种）。然而椭圆上两点逆时针方向的距离实际上是绕椭圆的两条路中较短的一条。

解决方法是将"large arc"标志改为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>

如果您想知道为什么弧线仍然不完全准确，可能是：

您的起点和终点不准确。 IE。不完全在椭圆上，或者
数值不准确。有关详细信息，请参阅此答案：How to render a svg circle using start and endAngle

SVG 圆弧不遵循椭圆

SVG arc is not following the ellipse

svg

path

automatic-ref-counting

ellipse