Создать SVG-круг, используя путь из 6 сегментов

Question

как создать круг, используя SVG с несколькими путями с 6 сегментами в угле 7. Каждый сегмент имеет свой путь, а также промежуток между каждым сегментом.см. ссылку ниже для справки.Хотите использовать то же изображение для элемента SVG.как создать в угловых 7?

Answer 1

Вот как я это сделаю: я создаю путь id="segment", и я использую и поворачиваю его 6 раз:

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

Круг можно разделить на 6 сегментов с помощью атрибута stroke-dasharray

• Полная окружность с радиусом r = "100px" равна 2 * 3.1415 * 100 = 628.3px
• Длина одного сектора 628.3 / 6 = 104.71px
• Параметры для атрибута 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>   

Автор не спрашивал, но, возможно, кому-то будет полезно научиться анимировать stroke-dasharray

Основная хитрость заключается в том, что на первый круг, разделенный на 6 секторов, накладывается поверх одного сектора другой сектор, который дискретно перемещается на длину, равную одному сектору

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