如何创建带有虚线边框的圆形 svg 进度条

Question

>我正在使用这个很棒的教程来创建圆进度条。

但我的问题是我想更改 CSS 中的笔画破折号数组：

fill: none;
stroke: #FF2A2A;
stroke-width: 9.9213;
stroke-miterlimit: 10;
stroke-dasharray: 1.4308, 1.4308;

我希望它像教程中一样对它进行动画处理，但看起来像这个图像：虚线边框圆圈

Answer 1

尝试对提到的教程进行以下更改：

progress.component.css:
~~~~~~~~~~~~~~~~~~~~~~~
.progress__meter {
    stroke: #4CAF50;
}
.progress__value {
    stroke: white;
    transition: all 100ms;
}

progres.component.html:
~~~~~~~~~~~~~~~~~~~~~~~
<div class="progress">
    <svg class="progress__svg" width="120" height="120" viewBox="0 0 120 120">
        <circle class="progress__meter" [style.strokeDasharray]="5" cx="60" cy="60" [attr.r]="radius" stroke-width="11" />
        <circle class="progress__value" [style.strokeDasharray]="circumference" [style.strokeDashoffset]="1-dashoffset" cx="60" cy="60" [attr.r]="radius" stroke-width="12" />
    </svg>
    <div class="progress__value-text">{{value}}%</div>
</div>

progress.component.ts:
~~~~~~~~~~~~~~~~~~~~~~
private progress(value: number) {
    const progress = value / 100;
    this.dashoffset = this.circumference * (progress);
}