如何使svg填充动态的角度

Question

以下是代码：https://stackblitz.com/edit/angular-cbayxe?file=src%2Fapp%2Fapp.component.html

HTML

<div *ngFor="let item of data;let i = index">
<svg xmlns="http://www.w3.org/2000/svg" width="180px" height="180px" viewBox="0 0 54 54" aria-hidden="true" attr.fill="url(#color-{{i}})">
<defs>
<linearGradient id="color-{{i}}" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="rgb(132, 219, 255)" />
<stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(132, 219, 255)" />
<stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(255, 255, 255)" />
<stop offset="100%" stop-color="rgb(255, 255, 255)" />
</linearGradient>
</defs>
<path stroke="#000" d="M15 6 
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z" />
</svg>
</div>

TS

data = [
{
name: 'server1',
humidity: '50.9'
},
{
name: 'server2',
humidity: '52.9',
},
{
name: 'server3',
humidity: '53.9',
}
]
humidityPercentage: any;
constructor() { }
ngOnInit() {
}
}

我想做的是，有一个67%的限制，当它达到67%以上时，我想做就是让它变成红色。

如何使67%以上的人变成红色。

因为当我试图将其更改为红色并将湿度值更改为20%时，它会变为红色。

Answer 1

以下是线性梯度中实现所需目标所需的步骤：

export class AppComponent implements OnInit  {
min = Math.min
threshold = 67
...
}

<linearGradient id="color-{{i}}" x1="0%" y1="100%" x2="0%" y2="0%">
<stop [attr.offset]="min(item.humidity, threshold) | humidityPipe" stop-color="rgb(132, 219, 255)" />
<stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(255, 0, 0)" />
<stop stop-color="rgb(255, 255, 255)" />
</linearGradient>

如果我理解正确的话，我认为你想要的是蓝色到湿度水平和阈值(67%(中的最小值，然后是红色到湿度水平的梯度，然后是从湿度水平到最后的白色。