CODEWITHSUNDEEP
svgpathgeometry
trivelt
trivelt

Reputation: 1965

Drawing parts of circle's circumference in SVG

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

Upvotes: 2

Views: 6320

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101810

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.

Upvotes: 4

Related Questions