如何創建帶有虛線邊框的圓形svg進度欄

Question

我正在使用這個很棒的教程來創建圈子進度欄。

但我的問題是我想在CSS中更改stroke-dasharray：

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