html - Mogu li koristiti Angular property binding unutar SVG defs bloka?

Koristim Angular-7. Imam jednostavnu komponentu za prikaz pozadine slike ikone. Sastoji se od bloka SVG koda u predlošku koji u osnovi prikazuje ispunjeni pravokutnik. Aplikacija može instancirati oko dvadeset ovih komponenti temeljenih na podacima.

Izvorno, pozadinski pravokutnik imao je boju ispune koja je bila vezana uz svojstvo unutar komponente koje je dodijeljeno prilikom konstrukcije. Sada ga želim malo 'uljepšati' primjenom linearnog gradijenta čije boje ovise o podvrsti ikone. Drugim riječima, želio bih koristiti Angularovo povezivanje svojstava na atributu stop-color elementa stop linearnog gradijenta.

Predložak roditelja - Stvaranje više ikona

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

Primjer predloška 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>

Isječak klase komponente my-node-component

@Input() nodeInfo: INodeInfo;  

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

Imajte na umu da je samo vezivanje svojstava u redu, kao i korištenje ngOnInit za pristup @Input parametrima komponente.

Dogodi se da je prvi komponenta instancirana i čini se da je ispravno vezana uz vrijednosti svojstava, this.color1 i this.color2. Međutim, sve preostale komponente ikona kada se instanciraju, očito su vezane uz iste prve vrijednosti svojstava boja, što rezultira time da svaka ikona ima isti gradijent boja. Kao što sam rekao, kada je vezanje svojstava korišteno izravno na "fill" elementu pravokutnika, svaka ikona bila je obojana ispravno. To mi govori da Angularov *ngFor iterator funkcionira ispravno.

Možda nisam ispravno razumio opseg bloka "defs". Kao da su svi sadržaji "defs" zapravo "statični" za komponentu? Ne mogu provjeriti ovu hipotezu ni u Angular ni u SVG tutorijalima. Postoji jedan ili dva bloga i pitanja koja nagovještavaju korištenje više linearGradient deklaracija - ali nije jasno odnosi li se to ovdje. Bilo kakav savjet bi bio koristan.