Angular svg不同的实例共享相同的defs

Question

我有一个角度组件，我正在使用 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>

如果我有一个组件实例，这可以正常工作。如果我有多个组件具有不同的“值”值，则所有组件都显示第一个组件的填充。

不知道哪里出错了

类似问题：Updating offsets dynamically

PS：我实际上有一个很长的电池图标路径.. Stackoverflow 不知何故不接受很长的路径。这就是我用 rect 替换路径的原因。如果它是一个矩形，我可以改变它的高度来达到我所需要的:)

Answer 1

问题是linearGradient元素都有相同的id，即batteryLG。你可以让每个id 都独一无二，让每个形状都引用它自己的渐变。实现这一点的一种方法是在组件类中定义一个static 计数器，为每个实例递增它，并将其值包含在组件的batteryLinearGradientId 属性中：

export class MySvgComponent {
  @Input() value: number;
  private static counter = 0;
  batteryLinearGradientId = "batteryLinearGradient_" + MySvgComponent.counter++;
}

然后您可以将该属性绑定到模板中的id，并在矩形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。请注意，我修改了渐变色标的定义，以简化演示。