Angular Material：How to change the background color for the mat spinner path

Question

我创建了一个垫进度微调器，更改了笔触的颜色，但需要知道如何更改其余笔划路径的CSS

我尝试更改颜色，但更改了笔触颜色。但是我找不到与路径CSS相关的任何内容。我可以看到只有在使用mat-progress-spinner时才会生成圆圈

<mat-progress-spinner [color]="'orange'" [mode]="'determinate'" 
[diameter]="80" strokeWidth="5" [value]=" 70">
</mat-progress-spinner>

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: green;
}

.mat-progress-spinner path, .mat-spinner path {
    stroke: red;
}

例如，在上面的示例中，值为70，则对于70，应将其映射为橙色，需要帮助以显示剩余30个值的不同颜色

• 70-橙色
• 30-黄色（（[需要此解决方案）]

Answer 1

该圆圈是动态创建的，因此您不会找到为剩余部分着色的属性（因为剩余部分根本没有上色，因此我们无法更改其颜色）；

但是您可以得到想要的效果...您可以通过以下方式实现：

创建完整圆圈的图像，并将其放置在您的mat-card ...我拍摄了以下紫色图像

接下来，通过mat-spinner将position:absolute放置在此静态图像的顶部

相关

HTML：

<mat-card>
    <mat-card-content>
        <h2 class="example-h2">Result</h2>

        <img src='https://i.stack.imgur.com/aNUGr.png' alt='background'/>

        <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value">
        </mat-progress-spinner>
    </mat-card-content>
</mat-card>

相关
CSS

：

mat-progress-spinner{    
  position: absolute;
  top: 56px;
  left: 19px;
}

circle{
  stroke-width: 11%;
}

完整working stackblitz here