使用 6 段路径创建 SVG 圆答案

【问题标题】：Create SVG circle using path with 6 segments使用 6 段路径创建 SVG 圆
【发布时间】：2019-09-25 22:03:22
【问题描述】：

如何使用 svg 创建圆，该圆具有 6 角 7 段的多路径。每个段都有不同的路径，并且每个段之间也有间隙。请参阅以下链接以供参考。想要对 svg 元素使用相同的图像。如何在 Angular 7 中创建？

【问题讨论】：

加油！ Svg 很有趣。

【解决方案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>

【讨论】：

【解决方案2】：

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

半径为 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>

【讨论】：