为何无法用单个SVG圆弧路径绘制完整圆形？

Excellent question—this is a common gotcha for folks working with SVG's path element. Let’s break down the spec reasoning and practical alternatives:

The Short Answer: It’s Undefined Behavior #

When your arc’s start and end points are identical, the SVG specification explicitly marks this as undefined behavior—no matter how you set largeArcFlag or sweepFlag.

Here’s the relevant snippet from the SVG 2 specification (this rule applies to all modern SVG versions):

If the start point and end point for the arc are identical, then:

• If either rx or ry is zero, the arc segment is treated as if it were omitted.
• Otherwise, the behavior is undefined. Renderers may handle this case differently (some might draw a full circle, others nothing at all).

The root issue is ambiguity: when start and end points overlap, there’s no unique way to resolve the arc’s path. Even with largeArcFlag set to 1, the renderer can’t determine the exact orientation or intended circle—there are infinitely many circular arcs that fit the radius parameters but start/end at the same point.

Reliable Workarounds #

If you need a full circle, stick to these predictable options:

• Use the <circle> element (the most semantic and straightforward choice):

  <circle cx="50" cy="50" r="40" fill="none" stroke="#000" />
  

• Split the circle into two connected half-arcs (guarantees consistent rendering across all browsers/renderers):

  <path d="M90,50 A40,40 0 1,0 10,50 A40,40 0 1,0 90,50" fill="none" stroke="#000" />
  

• Draw an almost-full arc (offset start/end by a tiny value like 0.01 units) if you absolutely need a single arc command—though this is a hack and not recommended for production.

内容的提问来源于stack exchange，提问作者Fuzzyma