angular - 带 Angular Angular 2圆形svg

我想创建一个圆形的svg


我找到了this库和其他一些库。但是，它们都不符合我的要求。我真的不知道如何创建这样的作品。谁能帮助我如何创建这样的svg？任何参考/ plnkr链接将不胜感激。

最佳答案

我认为它不需要插件即可处理。我用SVG制作了原型。希望对您有帮助。检查以下代码（我使用SCSS）：

$pi: 22/7;
$r: 50;
$circumference: (2 * $pi * $r);
circle {
  cx: 60;
  cy: 60;
  r: $r;
  stroke-width: 10;
  fill: transparent;
  transform-origin: center;
}

.bg-circle{
  stroke: lightblue;
}

.hl-circle{
  stroke: blue;
  stroke-dasharray: calc(#{$circumference} * 10 / 100) #{$circumference};
  transform: rotate(-90deg);
}

.st-circle{
  stroke: white;
  transform: rotate(-20deg);
  stroke-dasharray: 2 (($circumference / 10) - 2);
}

<svg>
  <circle class="bg-circle"></circle>
  <circle class="hl-circle"></circle>
  <circle class="st-circle"></circle>
</svg>

您可以检查正在运行的fiddle here。