Как сделать динамический наполнитель SVG c в angular

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%), затем градиент красного до уровня влажности, а затем белый от уровня влажности до конца.