角度2圆形svg中风

Question

我想创建一个这样的循环svg

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

Answer 1

我认为它不需要插件来处理这个问题。我用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。