Create SVG circle using path with 6 segments

不羁的心 提交于 2019-12-29 09:32:30

问题


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?


回答1:


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>



回答2:


The circle can be divided into 6 segments using the attribute stroke-dasharray

  • The full circumference with a radius r = "100px" is equal to 2 * 3.1415 * 100 = 628.3px
  • The length of one sector 628.3 / 6 = 104.71px
  • Parameters for attribute 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>   

The author did not ask, but maybe it will be useful for someone to learn how to animate a stroke-dasharray

The main trick is that on the first circle divided into 6 sectors is superimposed on top of one sector another sector that is discretely moved by a length equal to one sector

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


来源:https://stackoverflow.com/questions/56036195/create-svg-circle-using-path-with-6-segments

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!