Круглый индикатор выполнения с внутренним штрихом

Question

Я пытаюсь построить круговую диаграмму в процентах следующим образом:

На данный момент у меня есть это: https://jsfiddle.net/pvtxgq21/1/

HTML:

<svg viewBox="0 0 36 36" class="circular-chart">
  <path
    class="circle-outer"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  <path
    class="circle"
    stroke-dasharray="50, 100"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
</svg>

CSS:

body {
  background-color: #000;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 256px;
}

.circle-outer {
  fill: none;
  stroke: #3c3c3c;
  stroke-width: 1;
}

.circle {
  fill: none;
  stroke: #17E68F;
  stroke-width: 3;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

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

Я не могу найти способ «раскрасить» цветной круг внутри другой, как показано на рисунке выше. Я плохо разбираюсь в SVG. Есть ли простое решение? Некоторое свойство SVG, которое я использую?

Спасибо.

Answer 1

1. Вам нужно переписать второй путь так, чтобы радиус круга был на 2 единицы меньше (stroke-width = "3" - stroke-width = "1")

2. Теперь проблема в том, что длина анимированного пути меньше, поэтому вам нужно также изменить анимацию

body {
      background-color: #000;
    }
    
    .circular-chart {
      display: block;
      margin: 10px auto;
      max-width: 256px;
    }
    
    .circle-outer {
      fill: none;
      stroke: #3c3c3c;
      stroke-width: 1;
    }
    
    .circle {
      fill: none;
      stroke: #17E68F;
      stroke-width: 3;
      stroke-dasharray: 0 93.73;
      animation: progress 1s ease-out forwards;
    }
    
    @keyframes progress {
      100% {
        stroke-dasharray: 46.86;
      }
    }
    
    .percentage {
      fill: #666;
      font-size: 0.5em;
      text-anchor: middle;
    }

<svg viewBox="0 0 36 36" class="circular-chart">
      <path
        class="circle-outer"
        d="M18 2.0845
            a 15.9155 15.9155 0 0 1 0 31.831
            a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path
        class="circle"
        d="M18 3.0845
            a 13.9155 13.9155 0 0 1 0 29.831
            a 13.9155 13.9155 0 0 1 0 -29.831"
      />
    </svg>

Answer 2

<svg viewBox="0 0 36 36" class="circular-chart">
<path
class="circle-outer"
d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
class="circle"
stroke-dasharray="70, 100"
d="M18 2.8
    a 15 15 0 0 1 0 30
    a 15 15 0 0 1 0 -30"
/>
</svg>

Здравствуйте. Используйте приведенный выше код в <svg>. Надеюсь, это решит вашу проблему.