How can I stroke svg multiple circles up to 100 percent?

Question

I followed a simple example on how to build a simple svg chart. I tried to add multiple circles in the same viewBox which will be filled with color between 0 to 100% but I can’t stroke them to 100%.

stroke-dasharray="75,100" stroke-dasharray="100,100"

Here is the codepen link. Anyone with the any idea or work around

[https://codepen.io/malawi-realestate/pen/MzKpwp][1]

<svg class="circular-chart" viewBox="0 0 50 50"><path class="circle-bg" d="M18 1
              a 23.4155 23.4155 0 0 1 0 46.831
              a 23.4155 23.4155 0 0 1 0 -46.831"></path><path class="circle circle-ok" d="M18 1
              a 23.4155 23.4155 0 0 1 0 46.831
              a 23.4155 23.4155 0 0 1 0 -46.831" stroke-dasharray="100, 100"></path><path class="circle-bg" d="M18 4
             a 20.4155 20.4155 0 0 1 0 40.831
             a 20.4155 20.4155 0 0 1 0 -40.831"></path><path class="circle circle-bad" d="M18 4
             a 20.4155 20.4155 0 0 1 0 40.831
             a 20.4155 20.4155 0 0 1 0 -40.831" stroke-dasharray="75, 100"></path><path class="circle-bg" d="M18 7
             a 17.4155 17.4155 0 0 1 0 34.831
             a 17.4155 17.4155 0 0 1 0 -34.831"></path><path class="circle circle-none" d="M18 7
             a 17.4155 17.4155 0 0 1 0 34.831
             a 17.4155 17.4155 0 0 1 0 -34.831" stroke-dasharray="50, 100"></path><path class="circle-bg" d="M18 10
             a 14.4155 14.4155 0 0 1 0 28.831
             a 14.4155 14.4155 0 0 1 0 -28.831"></path><path class="circle circle-empty" d="M18 10
             a 14.4155 14.4155 0 0 1 0 28.831
             a 14.4155 14.4155 0 0 1 0 -28.831" stroke-dasharray="80, 100"></path><text class="percentage" x="18" y="26">5.5</text><text class="chart-text" x="18" y="30">Your score</text></svg>

enxaneta enxaneta · Accepted Answer · 2018-11-08T08:45:04

I'm not very sure I understand your question. If you need ro run the animation all around the circle you need to calculate the length of the path. In your case the length of the .circle-ok path is the perimeter of the circle

 let perimeter_ok  = 2 * Math.PI * 23.4155;//147.124

Alternatively you can use the getTotalLength() method to calculate the length of the path

let ok = document.querySelector(".circle-ok")
let perimeter_ok  = ok.getTotalLength();

You can use the perimeter to set the stroke-dasharray value.

<path class="circle circle-ok" d="..." stroke-dasharray="147.124"></path>

if you prefer you can use javascript to set the stroke-dasharray value:

ok.setAttributeNS(null, "strokeDasharray", perimeter_ok)

In order to animate the path you need to animate the stroke-dashoffset from 100% (147.124 in your case) to 0.

@keyframes progress {
 from {
    stroke-dashoffset: 147.124;
  }
  to{
   stroke-dashoffset: 0;
  }
}

You may also like to read this article first: How SVG Line Animation Works

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-height: 350px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: .61;
}

.circle {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
 from {
    stroke-dashoffset: 147.124;
  }
  to{
   stroke-dashoffset: 0;
  }
}

.circle-ok {

  stroke: green;
}


.circle-empty {
  stroke: blue;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.cb-graph-container{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.chart-text {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.15em;
  text-anchor: middle;
  text-transform: uppercase;
}

<svg class="circular-chart" viewBox="0 0 50 50">
  <path class="circle-bg" d="M18 1
                  a 23.4155 23.4155 0 0 1 0 46.831
                  a 23.4155 23.4155 0 0 1 0 -46.831"></path>
  <path class="circle circle-ok" d="M18 1
                  a 23.4155 23.4155 0 0 1 0 46.831
                  a 23.4155 23.4155 0 0 1 0 -46.831" stroke-dasharray="147.124"></path>
  
  <text class="percentage" x="18" y="26">5.5</text><text class="chart-text" x="18" y="30">Your score</text>
  
</svg>

How can I stroke svg multiple circles up to 100 percent?

1 Answers