Используя кружок SVG, как анимировать пунктирный индикатор выполнения, чтобы показать определенный процент?

Question

В настоящее время у меня есть SVG с тремя элементами круга.

• Круг 1: серая рамка (нижний слой)
• Круг 2: красная пунктирная рамка (средний слой)
• Круг 3: Синяя рамка (верхний слой)

Я могу анимировать Круг 3 (Синий), чтобы показать 40%.

К сожалению, Круг 2 (Красный)) вокруг всего круга (100%) вместо 80%.

Так что мои вопросы ...

1. Можно ли анимировать круг 2 так же, как круг 3и занимают только 80%?Или это невозможно из-за штрих-черты: 0,2em (строка 93 в CSS)?

2. В CSS (строка 81 и строка 87) у меня есть векторный эффект:не масштабируемый удар закомментирован.Я хотел бы раскомментировать эти две строки, но, к сожалению, круговая шкала прогресса выглядит неправильно.Любой возможный способ сделать удар не реагирующим при наличии желаемой анимации / вида?

Любая помощь приветствуется!

Вот кодекс: https://codepen.io/anon/pen/oaVrpE

PS Я могу сделать анимацию, добавив «активный» класс к элементам круга.Этот класс добавляется кнопками.Наконец, «активный» класс вызывает имена ключевых кадров в CSS.

Фрагмент HTML и CSS-кодов, но, пожалуйста, проверьте приведенный выше код.

HTML

<svg id="categoryIcon" data-name="category icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" width="100%" height="100%" class="catIcon userIcon">
    <circle class="filler-loader fill-line" cx="48" cy="48" r="47" />
    <circle class="filler-loader path path-dashed" cx="48" cy="48" r="47" />
    <circle class="filler-loader path path-progress" cx="48" cy="48" r="47" />
    <path d="M1536 1399q0 109-62.5 187t-150.5 78H469q-88 0-150.5-78T256 1399q0-85 8.5-160.5t31.5-152 58.5-131 94-89T583 832q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" transform="translate(26, 25), scale(0.025)"/>
</svg>

CSS

svg.catIcon {
  overflow: visible;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;

  .filler-loader {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  .fill-line {
    fill: #fff;
    stroke: #e3e3e3;
    stroke-width: 8px;
    // vector-effect: non-scaling-stroke;
  }

  .path {
    fill: none;
    stroke-width: 8px;
    // vector-effect: non-scaling-stroke;
    stroke-dasharray: $dashOffset;
    stroke-dashoffset: $dashOffset;

    &-dashed {
      &.active {
        stroke-dasharray: 0.2em;
        stroke: red;
      }
    }

    &-progress {
      &.active {
        stroke: blue;
      }
    }

  }

  &.userIcon {
    .path-dashed {
      &.active {
        animation: circProgress80 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
        clip-path: url("#circleMask");
      }
    }

    .path-progress {
      &.active {
        animation: circProgress40 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
      }
    }
  }

}