how to create circle using svg with multiple path with 6 segments in angular 7. Each segments have different path and also gap in between each segment. refer below link for reference. Want to use same image for svg element. how to create in angular 7?

how to create circle using svg with multiple path with 6 segments in angular 7. Each segments have different path and also gap in between each segment. refer below link for reference. Want to use same image for svg element. how to create in angular 7?

• javascript
• angular
• svg
• angular7

• 3 Go for it! Svgs are fun. – SeaBiscuit Commented May 8, 2019 at 8:22

2 Answers 2

The circle can be divided into 6 segments using the attribute stroke-dasharray

• The full circumference with a radius r = "100px" is equal to 2 * 3.1415 * 100 = 628.3px
• The length of one sector 628.3 / 6 = 104.71px
• Parameters for attribute stroke-dasharray = "100 4.71"

<svg width="50%" height="50%" viewBox="50 90 400 400"  >
<circle cx="250" cy="250" r="100" style="stroke:dodgerblue; fill:none; stroke-opacity:0.5; stroke-width:50; stroke-dasharray:100 4.71;" /> 
 </svg>   

The author did not ask, but maybe it will be useful for someone to learn how to animate a stroke-dasharray

The main trick is that on the first circle divided into 6 sectors is superimposed on top of one sector another sector that is discretely moved by a length equal to one sector

<svg width="50%" height="50%" viewBox="50 90 400 400"  >
<circle cx="250" cy="250" r="100" style="stroke:black; fill:none; stroke-opacity:0.3; stroke-width:70; stroke-dasharray:100 4.71;" /> 

<circle transform="rotate(-90 250 250)" cx="250" cy="250" r="100" style="stroke:dodgerblue; fill:none;   stroke-opacity:0.9; stroke-width:70;
 stroke-dasharray:104.71 523.59; stroke-dashoffset: -52.31;" >
  
    <animate attributeName="stroke-dashoffset" values="-52.31;-157.11;-261.82;-366.53;-471.24;-575.91" dur="4s" repeatCount="indefinite" calcMode="discrete" fill="freeze" /> 
  </circle>
 </svg>   

This is how I would do it: I'm creating a path id="segment" and I'm using and rotate it 6 times:

let R = 45;// the outer radius
let r = 15;// the inner radius
//the radius for the text
let textR = r + (R - r)/2
// the angle for the slice
let A = Math.PI/3;
//points used to draw a slice
let p1 = {}
let p2 = {}
let p3 = {}
let p4 = {}
p1.x = r*Math.cos(-A/2);
p1.y = r*Math.sin(-A/2);
p2.x = R*Math.cos(-A/2);
p2.y = R*Math.sin(-A/2);
p3.x = R*Math.cos(A/2);
p3.y = R*Math.sin(A/2);
p4.x = r*Math.cos(A/2);
p4.y = r*Math.sin(A/2);
// the d attribute for the slice
let d =`M${p1.x},${p1.y} L${p2.x},${p2.y} A${R},${R} 0 0 1 ${p3.x},${p3.y} L${p4.x},${p4.y} A${r},${r} 0 0 0 ${p1.x},${p1.y}`;
// set the d attribute for the slice
sectorpath.setAttributeNS(null,"d", d);


// set the x and y attributes for the text
let text = document.querySelectorAll("#txt text")

text.forEach((t,i) =>{
  let x = textR * Math.cos(A*i - Math.PI/2);
  let y = textR * Math.sin(A*i - Math.PI/2);
  
  t.setAttributeNS(null,"x",x);
  t.setAttributeNS(null,"y",y);
})

svg{border:1px solid}
use{fill:blue; stroke:white; stroke-width:3}

<svg viewBox="-50 -50 100 100" width="300" >
  <defs>
    <path id="sectorpath" />
    <mask id="themask">
    <use xlink:href="#sectorpath" style="stroke:#000; stroke-width:3; fill: #ffffff"/>
    </mask>
    <use xlink:href="#sectorpath" id="sector" fill="blue" style="mask: url(#themask)"  />
  </defs>
  
  
  <use xlink:href="#sector" transform="rotate(-90)" />
  <use xlink:href="#sector" transform="rotate(-30)" />
  <use xlink:href="#sector" transform="rotate(30)" />
  <use xlink:href="#sector" transform="rotate(90)" />
  <use xlink:href="#sector" transform="rotate(150)" />
  <use xlink:href="#sector" transform="rotate(210)" />

    
</svg>