使用圆形SVG，如何为虚线进度条设置动画以显示特定百分比？

我目前有一个带有三个圆形元素的SVG .

• 圆圈1：灰色边框（底层）

• 圆圈2：红色虚线边框（中间层）

• 圆圈3：蓝色边框（顶层）

我能够为Circle 3（蓝色）设置动画以显示40％ .

不幸的是，圆圈2（红色）围绕整个圆圈（100％）而不是80％ .

所以我的问题是......

• 圆圈2的动画与圆圈3相同，只占80％吗？或者是不可能因为stroke-dasharray：0.2em（CSS中的第93行）？

• 在css（第81行和第87行）中，我有矢量效果：非缩放笔画已注释掉 . 我想取消注释这两行但不幸的是进度圆形条看起来不正确 . 在获得所需的动画/外观时，任何可能的方法使笔画无响应？

任何帮助表示赞赏！

这是Codepen：https://codepen.io/anon/pen/oaVrpE

附：我可以通过向圆形元素添加“活动”类来完成动画 . 该类由按钮添加 . 最后，“active”类调用CSS中的关键帧名称 .

HTML和CSS代码的片段，但请查看上面的codepen .

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;
      }
    }
  }

}