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

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

使用属性stroke-dasharray可以将圆分为6段

• 半径r =“ 100px”的整个圆周等于2 * 3.1415 * 100 = 628.3px
• 一个扇区的长度628.3 / 6 = 104.71px
• 属性stroke-dasharray = "100 4.71"参数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进行动画制作也许会很有用

主要技巧是，在分为六个扇区的第一个圆上，将一个扇区叠加在另一个扇区上，该扇区离散地移动等于一个扇区的长度

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