SVG弧不跟随椭圆答案

【问题标题】：SVG arc is not following the ellipseSVG弧不跟随椭圆
【发布时间】：2017-12-19 16:05:36
【问题描述】：

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

<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

【问题讨论】：

标签： svg path automatic-ref-counting ellipse

【解决方案1】：

这是因为您正在使用设置为 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>

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

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

【讨论】：