如何在Angular中修改<object>引入的外部SVG图片的填充颜色

问题原因 #

你通过<object>标签引入的SVG是独立的DOM上下文，父页面的CSS无法直接穿透作用到SVG内部的元素上，因此直接设置fill属性不会生效。

适配深色模式的可行解决方案（按优先度排序） #

方案1：内联引入SVG（最推荐）

直接将SVG内容插入到组件模板中，可直接通过CSS控制样式，完美适配深色模式变量。
你可以通过HttpClient动态读取本地SVG文件内容并渲染：

1. 组件逻辑代码：

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-svg-icon',
  template: `<span [innerHTML]="svgContent"></span>`,
  styles: [`
    span ::ng-deep svg * {
      fill: var(--icon-color);
      /* 覆盖SVG源文件内联的fill属性可以加 !important */
    }
  `]
})
export class SvgIconComponent {
  svgContent: SafeHtml;
  @Input() iconName: string;

  constructor(
    private http: HttpClient,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.http.get(`assets/icons/${this.iconName}.svg`, { responseType: 'text' })
      .subscribe(rawSvg => {
        // 可选：自动删除SVG源文件里写死的fill属性
        const processedSvg = rawSvg.replace(/fill="[^"]+"/g, '');
        this.svgContent = this.sanitizer.bypassSecurityTrustHtml(processedSvg);
      })
  }
}

2. 组件调用：

<app-svg-icon iconName="certificate"></app-svg-icon>

3. 全局深色模式配置里直接修改CSS变量即可：

:root { --icon-color: #333; }
@media (prefers-color-scheme: dark) {
  :root { --icon-color: #eee; }
}

方案2：mask属性快速实现

不需要操作SVG DOM，直接把SVG作为遮罩，修改背景色即可实现颜色切换：

.certificate-icon {
  width: 24px;
  height: 24px;
  background-color: var(--icon-color);
  mask: url('assets/icons/certificate.svg') no-repeat center / contain;
  -webkit-mask: url('assets/icons/certificate.svg') no-repeat center / contain;
}

模板里直接使用：

<div class="certificate-icon"></div>

方案3：