html - Bisakah saya menggunakan binding properti Angular di dalam blok SVG defs?

Saya menggunakan Angular-7. Saya memiliki komponen sederhana untuk merender latar belakang dari gambar ikon. Ini terdiri dari blok kode SVG di template yang pada dasarnya merender sebuah persegi panjang yang terisi. Aplikasi ini dapat membuat sekitar dua puluh komponen yang didorong oleh data ini.

Awalnya, persegi panjang latar belakang memiliki warna isi yang diikat ke sebuah properti dalam komponen yang ditetapkan saat konstruksi. Sekarang, saya ingin memberikannya sedikit 'pizz-azz' dengan menerapkan gradien linear yang warnanya bergantung pada sub-tipe ikon. Dengan kata lain, saya ingin menggunakan pengikatan properti Angular pada atribut stop-color dari elemen stop pada gradien linear.

Cuplikan Template Induk - Pembuatan Beberapa Ikon

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

Cuplikan Template dari 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>

Cuplikan Kelas Komponen dari my-node-component

@Input() nodeInfo: INodeInfo;  

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

Perlu dicatat bahwa binding properti itu sendiri tidak masalah, demikian juga penggunaan ngOnInit untuk mengakses parameter @Input dari sebuah komponen.

Yang terjadi adalah komponen pertama diinstansiasi dan tampaknya terikat dengan benar pada nilai properti, this.color1 dan this.color2. Namun, semua komponen ikon yang tersisa ketika diinstansiasi, tampaknya terikat pada nilai properti warna pertama yang sama sehingga setiap ikon memiliki gradien warna yang sama. Seperti yang saya katakan, ketika binding properti digunakan langsung pada elemen "fill" dari persegi panjang, setiap ikon diwarnai dengan benar. Itu memberi tahu saya bahwa iterator *ngFor Angular berperilaku dengan benar.

Mungkin saya belum memahami cakupan dari blok "defs" dengan benar. Seolah-olah isi dari "defs" semuanya bersifat "statis" untuk komponen tersebut? Saya tidak dapat memverifikasi hipotesis ini baik dalam tutorial Angular maupun SVG. Ada satu atau dua blog dan pertanyaan yang memberi petunjuk tentang penggunaan beberapa deklarasi linearGradient - tetapi tidak jelas apakah ini berlaku di sini? Setiap saran akan sangat membantu.