SVG半圆和弧参数消歧义

Question

如MDN文章中所解释和演示的那样，SVG弧线的定义方式有点棘手，特别是与JS Canvas的arcTo()方法相比较时更为明显。

问题出现在我想要路径上的半圆的情况下。在这种情况下，角度为180°，两个可能的圆重叠在一起，“大弧标志”变得模糊不清，因为它被解释为“如果弧线应该大于或小于180度”，它没有指定如果角度恰好为180度会发生什么。

到目前为止，我通过简单的试错来“解决”这个问题。猜测一下，弧线走反了吗？尝试更改一个标志直到它起作用。毕竟只有四种组合，不需要太多工作。

但我想进一步了解。在这种情况下，我怎么知道我的弧线将走哪个方向？有没有一种简单的方法来记住这些信息，以便我不必使用试错法？

并且在相关的注释中，如果我希望我的“弧线”成为一个完整的圆，该怎么办？在这种情况下，有无数个圆满足“通过起始/结束点(同一点!)并具有半径R”的条件，所以这是否可以解决，还是应该使用两个180°的半圆？

- Niet the Dark Absol

---

只用一条弧线无法画出完整的圆形。 - Robert Longson

我通过分割避免180度和360度的弧。否则，你会冒着你的SVG在所有SVG实现中不同的风险。过去我曾经因此遇到很多问题，因为我被迫将SVG用作某些特殊机器的2D输入，并需要大量的CAD和其他矢量格式之间的转换代码。经过大量测试和探讨，我最终放弃了并只使用细分，因为这是最安全且实现起来不那么困难的方法。 - Spektre

Answer 1

请注意，sweep-flag 定义了弧形旋转方向。因此，对于180度的弧形，只需使用此标志选择所需的半圆形即可。在这种情况下，large-arc-flag 不起作用。

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 100
           A 50 50, 0, 0, 0, 100 100
           L 125 100 Z" fill="green"/>
  <path d="M 200 100
           A 50 50, 0, 0, 1, 300 100
           L 325 100 Z" fill="green"/>
  <path d="M 0 200
           A 50 50, 0, 1, 0, 100 200
           L 125 200 Z" fill="green"/>
  <path d="M 200 200
           A 50 50, 0, 1, 1, 300 200
           L 325 200 Z" fill="green"/>
</svg>

- MBo

---

所以基本上...在这里large-arc没有影响，而对于sweep来说，0表示逆时针，1表示顺时针？ - Niet the Dark Absol

大弧对于180度的弧没有影响，但对于其他值有影响。关于扫描 - 是的。 - MBo