SVG-Kreis hat eine Lücke

Question

Ich versuche, ein Kreisdiagramm mit SVG und einige Tricks zu bauen.

.pie { 
 
    border-radius: 50%; 
 
    transform: rotate(-90deg); 
 
} 
 
.pie .background { 
 
    fill: none; 
 
    stroke: #eaeaea; 
 
    stroke-width: 3; 
 
    stroke-dasharray: 100 100; 
 
} 
 
.pie .chart { 
 
    fill: none; 
 
    stroke: #f73319; 
 
    stroke-width: 3; 
 
    stroke-dasharray: 0 100; 
 
    animation: 2s linear slice; 
 
    animation-fill-mode: forwards 
 
} 
 
@keyframes slice { 
 
    to { 
 
    stroke-dasharray: 75 100; 
 
    } 
 
}

<svg viewBox="0 0 64 64" class="pie"> 
 
    <circle class="background" r="25%" cx="50%" cy="50%"></circle> 
 
    <circle class="chart" r="25%" cx="50%" cy="50%"></circle> 
 
</svg>

JSFiddle.

Der Code ist recht einfach: Ich verwende stroke-dasharray, um einen Strich zu haben, der den ganzen Kreis abdeckt und angepasst werden kann, um ein Stück zu machen. Aus irgendeinem Grund "schließt" jedoch keiner der Browser den Kreis.

Wenn Sie das Kreisdiagramm % anpassen möchten, können Sie die erste Zahl in

ändern

stroke-dasharray: 75 100; 

Die zweite Zahl, die Lücke zwischen verschiedenen Striche angibt. Der Grund ist es bei 100 ist, weil es mit dem Radius des Kreises gleich ist, nämlich:

radius * width * 2 * pi 
= 0.25 * 64 * 2 * pi 
= 100.53 

Answer 1

Ihr Kreis ist R = „25%“ in a viewBox = „0 0 64 64“ Das heißt, es hat ein Radius von 16 (25% von 64)

Der Umfang eines Kreises ist 2 * PI * r, was für r = 16 ist 100.53 dh etwas größer als 100, so dass der erste dasharray Wert von 100 den Kreis nicht vervollständigt. Machen Sie einfach den ersten Wert 100.53 und es wird komplett umlaufend gezeichnet.

.pie{ 
 
      border-radius:50%; 
 
      transform: rotate(-90deg); 
 
     } 
 
     .pie .background{ 
 
      fill:none; 
 
      stroke:#eaeaea; 
 
      stroke-width:3; 
 
      stroke-dasharray:100.53 100; 
 
      
 
     } 
 
     .pie .chart{ 
 
      fill:none; 
 
      stroke:#f73319; 
 
      stroke-width:3; 
 
      stroke-dasharray:0 100; 
 
      animation: 2s linear slice ; 
 
      animation-fill-mode:forwards 
 
     } 
 
     @keyframes slice{ 
 
      to{stroke-dasharray:100.53 100;} 
 
     }

<svg viewBox="0 0 64 64" class="pie"> 
 
    <circle class="background" r="25%" cx="50%" cy="50%"> 
 

 
    </circle> 
 
     <circle class="chart" r="16" cx="50%" cy="50%"> 
 

 
    </circle> 
 
    
 
</svg>