带有中风的角2圆形svg

Posted 2023-03-13

【中文标题】带有中风的角2圆形svg

【英文标题】：Angular 2 circular svg with stroke

【发布时间】：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。非常感谢 :) 它帮助了我。