我有一个 SVG 矩形，它需要根据对象中的值动态填充。

问题 :: 我的所有 rect 元素都填充了与第一次迭代值相同的颜色代码（停止颜色）和相同的百分比（偏移量），不应用剩余的迭代值。

<div class="col col-sm-3" *ngFor="let box of boxes; let i = index;">
<svg width="240" height="140" id="svg2" version="1.1" viewBox="60 -40 180 220" xmlns="http://www.w3.org/2000/svg">
<defs> 
<linearGradient id="MyGradient" x2="0%" y1="1" x1 ="0" y2="0">
<stop attr.offset="{{ box[i].fper }}%" [attr.stop-color]="box.color"></stop>
<stop attr.offset="{{ box[i].fper }}%" stop-color="#FFFFFF"></stop>        
<stop attr.offset="{{ box[i].eper }}%" stop-color="#FFFFFF"></stop>
</linearGradient>
</defs>
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="15" y="8" width="300" height="145">
</svg>
</div>