0

I am trying to draw a donut with an SVG path. I do this by drawing two arcs and a line. The first arc is the outer circle. It works fine until the radius is high. When the outer circle radius decreases, the doughnut does not appear. 

<svg height="400" width="400">
  <path d="M 200 143 A 57 57 0 1 1 199.99994299999997 143 L 199.9999772 177.2000000000114 A 22.8 22.8 1 1 0 200 177.2 z" fill="transparent" stroke="blue" />
</svg>

The following screen shot shows the original image.

enter image description here

My code is in this jsfiddle.

Michael Laszlo
  • 12,009
  • 2
  • 29
  • 47
vinoth kumar A
  • 26
  • 4

2 Answers2

1

The problem is that you're only closing the second arc. You should close the first arc before you draw the second arc.

Demonstration:

<svg height="400" width="400">
  <path d="M 200 143 A 57 57 0 1 1 199 143 z M 199.9999772 177.2000000000114 A 22.8 22.8 1 1 0 200 177.2 z" fill="transparent" stroke="blue" />
</svg>
Michael Laszlo
  • 12,009
  • 2
  • 29
  • 47
0

I'm not 100% sure what you are intending to draw, but one issue that comes up with SVG and arcs is that when you try to draw a complete circle, you will end up with beginning and ending points coinciding, which for the rendering engine will mean that the path segment is a null op (yeah weird) and will not be rendered. To get around this, use 2 Arcs.

<!DOCTYPE html>
<html>
<body>


<svg height="400" width="400">
      <path d="M 200 143 A 57 57 0 1 1 200 257 A 57 57 0 1 1 200 143Z L 200 177 A 22.8 22.8 0 1 0 200 222.6 A 22.8 22.8 0 1 0 200 177 z" fill="transparent" stroke="blue" />
 </svg>

</body>
</html>

Also your inner circle had a small (1 degree) tilt (3rd parameter) in it which I assume was unintentional. And if you don't want that vertical line, replace the L with an M.

Glenn Howes
  • 5,447
  • 2
  • 25
  • 29