SVG semi-circles and Arc parameter disambiguation

Question

As helpfully explained and demonstrated in this MDN article, SVG arcs are defined in a way that is a little tricky, especially when compared to the JS Canvas arcTo() method.

The problem arises when I want a semi-circle in my path. In a case like this, with an angle of 180°, the two possible circles overlap, and the "large-arc flag" becomes ambiguous because it's explained as "if the arc should be greater than or less than 180 degrees" - it doesn't specify what should happen if the angle is exactly 180 degrees.

Until now I've "resolved" this issue through simple trial-and-error. Take a guess, did the arc go the wrong way? Try changing a flag until it works. There's only four combinations after all, it doesn't take much work.

But I'd just like to further my understanding. In a case like this, how can I know ahead of time which way my arc will go? Is there an easy way to remember this information so I don't have to resort to trial-and-error?

And on a related note, what if I want my "arc" to be a full circle? In a case like this, there are infinitely many possible circles that meet the criteria of "passes through the starting/ending point (same point!) and has radius R", so is this resolvable at all, or should I stick to two 180° semi-circles instead?

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>