如何使 svg 填充在角度上动态化答案

【问题标题】：How make the svg filler dynamic in angular如何使 svg 填充在角度上动态化
【发布时间】：2020-07-12 18:53:37
【问题描述】：

这里是代码：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>

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

  ngOnInit() {
  }
}

我在这里尝试做的是，有一个 67% 的限制，然后当它达到 67% 以上时，我想做的是让它变成红色。

如何让超过 67% 的部分变成红色。

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

【问题讨论】：

标签： javascript css angular typescript svg

【解决方案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%) 之间的最小值，然后是红色渐变到湿度水平，然后是从湿度水平到最后的白色。

【讨论】：