I know it’s a bit late in the game, but I remembered this question from when it was new and I had a similar dillemma, and I accidently found the “right” solution, if anyone is still looking for one:
<path
d="
M cx cy
m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
"
/>
In other words, this:
<circle cx="100" cy="100" r="75" />
can be achieved as a path with this:
<path
d="
M 100, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"
/>
The trick is to have two arcs, the second one picking up where the first left off and using the negative diameter to get back to the original arc start point.
The reason it can’t be done as a full circle in one arc (and I’m just speculating) is because you would be telling it to draw an arc from itself (let’s say 150,150) to itself (150,150), which it renders as “oh, I’m already there, no arc necessary!”.
The benefits of the solution I’m offering are:
- it’s easy to translate from a circle directly to a path, and
- there is no overlap in the two arc lines (which may cause issues if you are using markers or patterns, etc). It’s a clean continuous line, albeit drawn in two pieces.
None of this would matter if they would just allow textpaths to accept shapes. But I think they are avoiding that solution since shape elements like circle don’t technically have a “start” point.
jsfiddle demo: http://jsfiddle.net/crazytonyi/mNt2g/
Update:
If you are using the path for a textPath reference and you are wanting the text to render on the outer edge of the arc, you would use the exact same method but change the sweep-flag from 0 to 1 so that it treats the outside of the path as the surface instead of the inside (think of 1,0 as someone sitting at the center and drawing a circle around themselves, while 1,1 as someone walking around the center at radius distance and dragging their chalk beside them, if that’s any help). Here is the code as above but with the change:
<path
d="
M cx cy
m -r, 0
a r,r 0 1,1 (r * 2),0
a r,r 0 1,1 -(r * 2),0
"
/>