带有中风的角2圆形svg答案

【问题标题】：Angular 2 circular svg with stroke带有中风的角2圆形svg
【发布时间】：2018-05-07 01:11:46
【问题描述】：

我想创建一个像这样的圆形 svg

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

【问题讨论】：

【解决方案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。

【讨论】：

谢谢，@Mr_Green。 stroke-dasharray: calc(#{$circumference} * 10 / 100) #{$circumference}; // 这里 10 是动态的。知道怎么做吗？我们可以创建彻底的 js 吗？
是的，通过 JS 传递 stroke-dasharray 属性。检查setAttribute。
知道了。 SVG 新手。我会努力理解 SVG。非常感谢 :) 它帮助了我。