Angular svg不同实例共享相同def
Angular svg不同实例共享相同def
提问于 2019-06-14 02:17:27
我有一个角度组件，我正在使用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>如果我只有一个组件实例，这就可以很好地工作。如果我有多个"value“值不同的组件，所有组件都会显示第一个组件的填充。
不知道我哪里弄错了
类似的问题：Updating offsets dynamically
附言:我实际上有一个很长的道路电池图标..不知怎么的，Stackoverflow不接受长路径。这就是我将path替换为rect的原因。如果它是一个rect，我可以改变它的高度来实现我所需要的:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-14 03:01:37
问题是linearGradient元素都有相同的id，即batteryLG。您可以使每个id都是唯一的，允许每个形状引用其自己的渐变。实现这一点的一种方法是在component类中定义一个static计数器，为每个实例递增该计数器，并将其值包含在组件的batteryLinearGradientId属性中：
export class MySvgComponent {
@Input() value: number;
private static counter = 0;
batteryLinearGradientId = "batteryLinearGradient_" + MySvgComponent.counter++;
}然后，您可以将该属性绑定到模板中的id，并在rect fill属性的URL中引用它：
<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>有关演示，请参阅this stackblitz。请注意，我修改了渐变停靠点的定义，以简化演示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56586431
复制相关文章
相似问题