Angular 2 Kreis svg mit Schlaganfall

Question

Ich möchte eine kreisförmige svg wie diese

erstellen, und ich fand this Bibliothek und einige andere Bibliotheken auch. Aber keiner von ihnen entspricht meiner Anforderung. Ich weiß wirklich nicht, wie ich das schaffen soll. Kann mir jemand helfen, so Svg zu erstellen? Jeder Verweis/PLNKR Link würde sehr geschätzt werden.

Answer 1

Ich denke nicht, dass es ein Plugin benötigt, um damit umzugehen. Ich habe einen Prototyp mit SVG gemacht. Hoffentlich wird es für Sie hilfreich sein. Überprüfen Sie den Code (Ich benutze 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>

Sie können die Arbeits fiddle here überprüfen.