Angular SVG不同实例共享相同的def [英] Angular svg different instances sharing same defs

问题描述

我有一个角度分量，我在其中使用def更改电池的svg状态填充.

I have an angular component, where I am changing the battery svg status fill by using the def.

    <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>

如果我只有该组件的一个实例，则可以正常工作.如果我有多个具有不同值"值的组件，则所有组件都将显示第一个组件的填充.

This works fine if i have a single instance of the component. If i have multiple components which have different values for "value", all the components show the fill of the first component.

不确定我在哪里弄错了

类似的问题:动态更新偏移量

PS:我实际上对电池图标有很长的路要走.这就是我用rect替换路径的原因.如果这是一个矩形，我可以更改它的高度以实现我所需要的:)

PS: I actually have a long path for battery icon.. Somehow Stackoverflow isn't accepting a long path. That's the reason i replaced the path with rect. If it was a rect I can change the height of it to achieve what I need :)

推荐答案

问题是linearGradient元素都具有相同的id，即batteryLG.您可以使每个id唯一，从而允许每个形状引用其自己的渐变.一种实现方法是在组件类中定义一个static计数器，为每个实例增加它，并将其值包括在组件的batteryLinearGradientId属性中:

The problem is that the linearGradient elements all have the same id, namely batteryLG. You could make every id unique, allowing each shape to refer to its own gradient. One way to achieve that is to define a static counter in the component class, increment it for each instance, and include its value in a batteryLinearGradientId property of the component:

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

然后您可以将该属性绑定到模板中的id，并在rect fill属性的URL中进行引用:

You can then bind that property to the id in the template, and refer to it in the URL of the rect fill attribute:

<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>

请参见此stackblitz 进行演示.请注意，我修改了渐变色标的定义，以简化演示.

See this stackblitz for a demo. Please note that I modified the definition of the gradient stops, to simplify the demo.

这篇关于Angular SVG不同实例共享相同的def的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！