0

I'm generating pie charts in SVG (using the ruby library svg-graph, but that isn't totally relevant), but there is a strange edge case where the chart is totally blank. This occurs in Chrome and Safari, but not in IE11 or Firefox.

I've narrowed it down to a certain path element whose d attribute varies slightly between the two. One produces a yellow circle while the other does not. My SVG knowledge is limited, so I don't understand why the second snippet isn't outputting anything. Any ideas?

Working:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M109.0,109.0 L109.0,0.0 A109.0,109.0 0, 1,1, 108.99999000000007 0.0 Z"
      transform="translate( -3.216245299353273e-15 10.0 )"
      style="fill: #FFDC00" />
</g>
</svg>

Not working:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M108.5,108.5 L108.5,0.0 A108.5,108.5 0, 1,1, 108.49999000000007 0.0 Z"
      transform="translate( -3.216245299353273e-15 10.0 )"
      style="fill: #FFDC00" />
</g>
</svg>
Adam Albrecht
  • 6,680
  • 4
  • 31
  • 35
  • 1
    As Deron has described, this will be a numerical rounding issue. That ruby graph library shouldn't be trying to draw close-to-360 degree pie slices with a single path arc command. You might want to file a bug with the authors of that library. – Paul LeBeau Aug 10 '16 at 05:23

1 Answers1

2

This may be a rounding issue. The path is trying to draw a circle using the arc path instruction "A". The beginning and ending points of the arc are very close together (< 0.0000001 units). If the SVG renderer thinks the two points are actually the same then it will draw an empty arc (0% of a circle) instead of a nearly complete (99.9999% of a circle).

You can try separating the beginning and ending points slightly further away (e.g., try 359 degrees instead of 360); as the Z instruction will close the path anyway and hide the tiny wedge left over. Also to see more of what's going on try stroking the path instead of filling it.

Or draw a circle using two half-circle arcs. See Circle drawing with SVG's arc path

Community
  • 1
  • 1
Deron Meranda
  • 96
  • 2