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与绿色椭圆的部分完全相同？

以下是codepen：https://codepen.io/anon/pen/eRXWLq

这是我可以获得的完全不同的半径：https://codepen.io/anon/pen/EXMXNN

Answer 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>

如果您想知道为什么弧仍然不完全准确，那么它将是：

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

SVG弧不跟随椭圆

1 个答案: