使用具有6个线段的路径创建SVG圆

Question

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?

Answer 1

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> 

Answer 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>