我有一个角度组件,我在其中使用 def 更改电池 svg 状态填充。
<svg #batteryIcon width="95%" height="95%" viewBox="0 0 260 399">
<defs>
<linearGradient #batteryLG id="batteryLG" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue" />
<stop [attr.offset]="value" stop-opacity="1" stop-color="royalblue" />
<stop [attr.offset]="value" stop-opacity="0" stop-color="royalblue" />
<stop offset="100%" stop-opacity="0" stop-color="royalblue" />
</linearGradient>
</defs>
<svg:rect id="rect" fill="url(#batteryLG)" x="-30" y="0" width=25% height="100%" ></svg:rect>
</svg>
如果我有该组件的单个实例,则效果很好。如果我有多个具有不同“值”值的组件,则所有组件都会显示第一个组件的填充。
不知道我在哪里犯了错误
类似问题:动态更新偏移量 https://stackoverflow.com/questions/41073950/bind-angular2-values-in-svg-linear-gradient-stop-offset
PS:我实际上有一个很长的电池图标路径。不知何故,Stackoverflow 不接受很长的路径。这就是我用 rect 替换路径的原因。如果它是一个矩形,我可以改变它的高度来实现我需要的:)
问题是linearGradient
元素都具有相同的id
,即batteryLG
。你可以让每一个id
独特的,允许每个形状参考它自己的渐变。实现这一目标的一种方法是定义一个static
组件类中的计数器,为每个实例递增它,并将其值包含在batteryLinearGradientId
组件的属性:
export class MySvgComponent {
@Input() value: number;
private static counter = 0;
batteryLinearGradientId = "batteryLinearGradient_" + MySvgComponent.counter++;
}
然后您可以将该属性绑定到id
在模板中,并在矩形的 URL 中引用它fill
属性:
<svg #batteryIcon width="95%" height="95%" viewBox="0 0 260 399">
<defs>
<linearGradient [id]="batteryLinearGradientId" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="royalblue" />
<stop [attr.offset]="value + '%'" stop-color="royalblue" />
<stop [attr.offset]="value + '%'" stop-color="yellow" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
</defs>
<svg:rect [attr.fill]="'url(#' + batteryLinearGradientId + ')'" x="-30" y="0" width=25% height="100%"></svg:rect>
</svg>
See 这次堆栈闪电战 https://stackblitz.com/edit/angular-glxpjb?file=src%2Fapp%2Fmy-svg.component.html进行演示。请注意,我修改了渐变停止点的定义,以简化演示。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)