2

I need to draw in SVG parts of circle's circumference in different colours (please look at the picture below). Unfortunately I'm not good at SVG, so I found solution which is in my opinion very poor: I'm using describeArc() function from this post and I draw two paths - one colourful circle and, over it, white circle with smaller radius. For example:

PATH1 = describeArc(x=10000, y=5000, radius=3000, startAngle=45, endAngle=90)
PATH2 = describeArc(x=10000, y=5000, radius=2800, startAngle=45, endAngle=90)

and after inserting it into svg, I have:

 <path d=PATH1 fill="red" stroke-width="0" />
 <path d=PATH2 fill="white" stroke="white" stroke-width="100" />

It works, but for me it's the ugly solution. How can I do it better?

Parts of circumference

Community
  • 1
  • 1
trivelt
  • 1,913
  • 3
  • 22
  • 44
  • Because one part of circumference requires drawing two paths. I wonder if it is possible to draw one path instead of covering colourful fragment by white section. And if it will be better solution. – trivelt Apr 25 '15 at 16:15

1 Answers1

4

That function is called describeArc(), but is actually drawing a circular sector, not an arc.

I agree it is kind of ugly because you are unnecessarily drawing - and overdrawing - most of the sector. And you will get issues with some of the colours bleeding around the edge of the white. I assume that's why you are including the white stroke.

The solution is very simple. Change the describeArc() function so that it is only drawing the arc, and not the rest of the sector. Change the code as follows:

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");

Ie. remove the two "L" path commands that form the other two sides of the sector. In other words, use the answer by @opsb, not the @Ahtenus answer.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks! It works, but when I was already tried using this version of `describeArc()` method, I set "stroke" and "fill" attributes conversely. – trivelt Apr 26 '15 at 07:53