使用具有6个线段的路径创建SVG圆 [英] Create SVG circle using path with 6 segments

问题描述

如何使用svg在角度为7的6段中的多路径创建圆. 每个段具有不同的路径，并且每个段之间也存在间隙. 请参考下面的链接以供参考.想要对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屋！