如何在Angular中更改svg元素的颜色？

<!-- example.component.html -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" style="fill: red;"></circle>
</svg>

/* example.component.css */
.circle {
  fill: blue;
}

<!-- example.component.html -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" class="circle"></circle>
</svg>

// example.component.ts
export class ExampleComponent {
  circleColor = 'purple';
}

<!-- example.component.html -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" [fill]="circleColor"></circle>
</svg>

// svg-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-svg-component',
  templateUrl: './svg-component.component.svg',
  styleUrls: ['./svg-component.component.css']
})
export class SvgComponentComponent {
  @Input() color: string = 'black';
}

<!-- svg-component.component.svg -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" [fill]="color"></circle>
</svg>

<!-- example.component.html -->
<app-svg-component [color]="'orange'"></app-svg-component>