Могу ли я использовать привязку угловых свойств в блоке SVG defs?

Question

Я использую Angular-7.У меня есть простой компонент для рендеринга фона изображения значка.Он включает в себя блок кода SVG в шаблоне, который, по сути, отображает заполненный прямоугольник.Приложение может создать около двадцати этих управляемых данными компонентов.

Первоначально фоновый прямоугольник имел цвет заливки, который был привязан к свойству внутри компонента, который был назначен во время создания.Теперь я собираюсь немного подправить его, применяя линейный градиент, цвета которого зависят от подтипа иконки.Другими словами, я хотел бы использовать привязку свойства Angular к атрибуту stop-color элемента stop линейного градиента.

Фрагмент родительского шаблона - создание нескольких значков

<ng-container *ngFor="let node of myNodes">
  <my-node-component [nodeInfo]=node></my-node-component>
</ng-container>

Фрагмент шаблона my-node-component

<svg viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1" x1=0 y1=0 x2=0 y2=1>
      <stop offset=0 style.stop-color="{{color1}}" />
      <stop offset=1 style.stop-color="{{color2}}" />
    </linearGradient>
  </defs>

  <g>
    <rect width="80" height="80" rx="5" ry="5"
      style="stroke-width:0"
      fill="url(#Gradient1)" />
  </g>
</svg>

Фрагмент класса компонента my-node-component

@Input() nodeInfo: INodeInfo;  

ngOnInit(): void {
  this.color1 = this.nodeInfo.color1;
  this.color2 = this.nodeInfo.color2;
}

Обратите внимание, что сама привязка свойства в порядке, как и использование ngOnInit для доступа к параметрам @Input компонента.

Что происходит, когдапервый компонент создается и, по-видимому, правильно связан со значениями свойств, this.color1 и this.color2.Однако все оставшиеся компоненты значков при создании экземпляров, по-видимому, привязаны к одним и тем же цветам значений первого свойства, в результате чего каждый значок имеет одинаковый градиент цвета.Как я уже сказал, когда привязка свойства использовалась непосредственно на элементе «заливки» прямоугольника, каждый значок окрашивался правильно.Это говорит мне о том, что *ngFor итератор Angular работает правильно.

Возможно, я неправильно понял область действия блока "defs".Это как если бы содержимое "defs" было "статичным" для компонента?Я не могу проверить эту гипотезу ни в Angular, ни в SVG.Есть один или два блога и вопросы, которые намекают на использование нескольких объявлений linearGradient - но неясно, применимо ли это здесь?Любой совет будет полезен.