How to create circle SVG with 4 sectors?

Question

I have created a code for a circle with 4 sectors. Is there any online SVG generator where I can create below circle in SVG? I am creating in SVG because I have to add the text in each sector.

I found below link but this is not my expected output: SVG Draw a circle with 4 sectors

.wrap {
  position: relative;
}

.circle-donut {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #a3fe01;
  border-bottom: 140px solid #2800eb;
  border-right: 140px solid #dd6479;
  border-left: 140px solid #ead52c;
}

.inlineWrap {
  position: relative;
}

.absolute {
  position: absolute;
}

.inlineWrap .top {
  top: 0;
}

.inlineWrap .bottom {
  bottom: 0;
}

.inlineWrap .left {
  left: 0;
}

.inlineWrap .right {
  right: 0;
}

<div class="wrap">
  <div class="circle-donut"></div>
</div>

duplicate question is talking about the links. I am not talking about the link. My question is how to create the circle — user9437856, Sep 16 '20 at 18:50
read the duplicate and not only the title. There is a full answer detailing how to create a circle — Temani Afif, Sep 16 '20 at 19:29

enxaneta · Accepted Answer · 2020-09-19T12:08:13.970

2

You can use 4 times the same circle with a stroke-dasharray = ".25 * tl .75 * tl" where tl is the total length of the circumference calculated either as the circle's perimeter or using the getTotalLength() method.

For the first use element the stroke-dashoffset = 1/8 * tf the circumference. The second use element has stroke-dashoffset = 1/8 * tf + 1/4tf The third has stroke-dashoffset = 1/8 * tf + 2/4tf... etc

svg{width:95vh}

<svg viewBox="-50 -50 100 100">
<defs>
  <circle id="c" r="40" stroke-width="20" fill="none" stroke-dasharray="62.75 188.25" />
</defs>
  <use xlink:href="#c" stroke="red" stroke-dashoffset="31.375"/>
    <use xlink:href="#c" stroke="gold" stroke-dashoffset="94.125"/>
   <use xlink:href="#c" stroke="blue" stroke-dashoffset="156.875"/> 
     <use xlink:href="#c" stroke="orange" stroke-dashoffset="219.625"/>
</svg>

Alternatively, instead of using the 1/8 * tf for every use you can rotate the circle -45 degs

svg{width:95vh}

<svg viewBox="-50 -50 100 100">
<defs>
  <circle id="c" r="40" stroke-width="20" fill="none" stroke-dasharray="62.75 188.25" transform="rotate(-45)" />
</defs>
  <use xlink:href="#c" stroke="red" stroke-dashoffset="0"/>
    <use xlink:href="#c" stroke="gold" stroke-dashoffset="62.75"/>
   <use xlink:href="#c" stroke="blue" stroke-dashoffset="125.5"/> 
     <use xlink:href="#c" stroke="orange" stroke-dashoffset="188.25"/>
</svg>

UPDATE

The OP is commenting

Can you help me out how to display the text inside the sector?

As I've commented for this you need to add some text elements to the svg element. The text elements are centered using css: text-anchor:middle;dominant-baseline:middle;

Since all the drawing is centered around the point x:0,y:0 you need to use the value of the radius of the circle (40) to get the x or y for the text. If the x or y is missing this means that it's value is 0.

svg{width:95vh}

text{text-anchor:middle;dominant-baseline:middle;font-size:10px;}

<svg viewBox="-50 -50 100 100">
    <defs>
      <circle id="c" r="40" stroke-width="20" fill="none" stroke-dasharray="62.75 188.25" />
    </defs>
      <use xlink:href="#c" stroke="red" stroke-dashoffset="31.375"/>
        <use xlink:href="#c" stroke="gold" stroke-dashoffset="94.125"/>
       <use xlink:href="#c" stroke="blue" stroke-dashoffset="156.875"/> 
         <use xlink:href="#c" stroke="orange" stroke-dashoffset="219.625"/>
         
        <text x="40">red</text>
        <text y="40">orange</text>
        <text x="-40">blue</text>
        <text y="-40">gold</text> 
         
    </svg>

edited Sep 19 '20 at 12:08

answered Sep 16 '20 at 18:11

enxaneta

31,608
5
29
42

Can you help me out how to display the text inside the sector? – user9437856 Sep 19 '20 at 04:09
At the end of the svg after all the use elements add `red orange blue gold` Make sure to add some style to center the text around the given point: `text{text-anchor:middle;dominant-baseline:middle;font-size:10px;}` – enxaneta Sep 19 '20 at 07:49
Yes, It's working. I just want to know, Can we use HTML tags? Like
red
Some para text here
– user9437856 Sep 19 '20 at 11:52
Please observe that in this case I've added a font size in the css. For a bigger font size is possible to get some text outside the svg element. In this case you may need to change the value of the viewBox. – enxaneta Sep 19 '20 at 11:58
Inside an svg text element you can't use html tags. If it's for the size you can change the font-size. In SVG you can use html tags by adding a [foreignObject](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject). I woldn't recomend it in this case – enxaneta Sep 19 '20 at 12:09
Yes, I have to display the first text a tittle bit bigger and two lines of the paragraph. – user9437856 Sep 19 '20 at 12:25
Actually I am trying this. https://stackoverflow.com/questions/63900248/create-a-circle-and-each-border-have-their-own-text but now I have two texts inside each sector – user9437856 Sep 19 '20 at 12:35
in this case you can wrap yout text in `` and set a different font size. If you need more help please ask a different question – enxaneta Sep 19 '20 at 12:36
Let me try tspan, If I found any issues then I will ask a new question. Thank you so much for your help. – user9437856 Sep 19 '20 at 14:00
Upvote from my side. Can I accept your answer now? because yesterday, I accepted the above one. – user9437856 Sep 19 '20 at 14:00
thankyou for upvoting. As for accepting my answer do whatever you want. – enxaneta Sep 19 '20 at 14:24

F.NiX · Answer 2 · 2020-09-16T18:19:40.333

Try this for a sector:

<svg width="500" height="500" viewBox="-150 -150 300 300">
  <path
    d="
      M -72 -72
      A 100 100 0 0 1 72 -72
      L 36 -36
      A 50 50 0 0 0 -36 -36
    "
    fill="#a3fe01"
  ></path>
</svg>

You didn't mention how familiar are you with svg concepts. So after reading this ask your exact problem again.

This one will be the full code:

<svg width="500" height="500" viewBox="-150 -150 300 300">
  <path
    d="
      M -72 -72
      A 100 100 0 0 1 72 -72
      L 36 -36
      A 50 50 0 0 0 -36 -36
    "
    fill="#a3fe01"
  ></path>
    <path
    d="
      M 72 -72
      A 100 100 0 0 1 72 72
      L 36 36
      A 50 50 0 0 0 36 -36
    "
    fill="#dd6479"
  ></path>
    <path
    d="
      M 72 72
      A 100 100 0 0 1 -72 72
      L -36 36
      A 50 50 0 0 0 36 36
    "
    fill="#2800eb"
  ></path>
    <path
    d="
      M -72 72
      A 100 100 0 0 1 -72 -72
      L -36 -36
      A 50 50 0 0 0 -36 36
    "
    fill="#ead52c"
  ></path>
</svg>

Let me try your answer. My aim is to dislay the text inside each sector — user9437856, Sep 16 '20 at 18:21

How to create circle SVG with 4 sectors?

2 Answers2

UPDATE

red