使用 6 段路径创建 SVG 圆 [英] Create SVG circle using path with 6 segments

问题描述

如何使用 svg 创建具有多个路径的圆，其中 6 个线段的角度为 7.每个段都有不同的路径，每个段之间也有间隙.请参阅以下链接以供参考.想要为 svg 元素使用相同的图像.如何在 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?

推荐答案

我会这样做:我正在创建一个路径 id="segment" 并且我正在使用和旋转它 6 次:

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>

这篇关于使用 6 段路径创建 SVG 圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！