Angular 材质：如何更改垫子微调器路径的背景颜色

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中......我拍了以下紫色图像

• 接下来，通过position:absolute将mat-spinner放置在此 static 图像之上

相关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%;
}

在这里完成工作堆栈闪电战