Question

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

Answer 1

这就是我要这样做的方式：我正在创建路径id="segment"，并且正在使用它并将其旋转6次：

// the outer radius
let R = 45;
// the inner radius
let r = 15;
// the angle: 1/6 of a circle
let A = Math.PI/3;
// the points used to draw the path
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 path
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 of the segment
segment.setAttributeNS(null,"d", d)

svg{border:1px solid}
use{fill:skyBlue; stroke:white; stroke-width:3}

<svg viewBox="-50 -50 100 100" width="300" >
  <defs>
    <path id="segment" />
  </defs>
  
  <use xlink:href="#segment" transform="rotate(-90)" />
  <use xlink:href="#segment" transform="rotate(-30)" />
  <use xlink:href="#segment" transform="rotate(30)" />
  <use xlink:href="#segment" transform="rotate(90)" />
  <use xlink:href="#segment" transform="rotate(150)" />
  <use xlink:href="#segment" 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"的参数

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

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

2 个答案: