CODEWITHSUNDEEP
htmlsvg
RhinoLarva
RhinoLarva

Reputation: 805

<path> (SVG) - elliptical arcs with big angles are working incorrectly

I'm trying to create pie chart (circle chart) using SVG. I decided to use path elements to represent different diagram slices. I think that an opportunity to use elliptical arcs for building paths looks great for this task.

But I faced a problem. For example, I want to create a diagram of 2 slices. One of them will take 1/4 of the circle, another one 1/2. Here is my code: 

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
  <path d="M100 100 L100 200 A100 100 0 0 1 100 0 Z" fill="#0000FF"></path>
</svg>

Everything looks fine while the angle of the second slice is 180 degrees.

Another example. The first slice takes the same 1/4 of circle. And the second one takes 3/4.

My code:

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
  <path d="M100 100 L100 200 A100 100 0 0 1 200 100 Z" fill="#0000FF"></path>
</svg>

I can fix this by setting 'large-arc-flag' attribute to 1 for the second slice:

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
   <path d="M100 100 L100 200 A100 100 0 1 1 200 100 Z" fill="#0000FF"></path>
</svg>

But here are my questions:

1) Just because of my curiosity, can someone explain why is it working like this in the second snippet?

and

2) If I'm adding slices in the loop dynamically depending on an array of values, how to calculate when I have to set 'large-arc-flag' to 0 and when to 1?

UPDATE: Sorry, second question possibly is a duplicate: link

Upvotes: 1

Views: 52

Answers (1)

AntiHeadshot
AntiHeadshot

Reputation: 1130

  1. There are always two posible arcs within the same rectagle, so you have to define which one you want, in this case 0 = the small one 1 = the big one.

  2. To see if the Arc is large or not, you just have to look if the slice is more than 1/2 of the total.

Upvotes: 1

Related Questions