如何修改通过[innerHTML]渲染的SVG的fill颜色

看起来你遇到的问题主要出在DOM选择器错误和Angular中直接操作DOM的不规范方式上，我来帮你一步步解决：

问题根源分析 #

1. 重复的ID：你的HTML里用*ngFor循环生成了多个<div id="steps">，但HTML规范要求ID必须唯一，这会导致jQuery选择器$("#steps #svg-icon")只能匹配到第一个元素，后续的SVG根本不会被选中。
2. 未定义的变量：eq(index)里的index没有在forEach中定义，正确的应该是用forEach的第二个参数获取索引。
3. Angular的DOM管理：直接用jQuery操作Angular渲染的DOM不是最佳实践，Angular的变更检测可能会覆盖你手动修改的属性。

推荐解决方案：渲染时直接注入fill属性（最简洁高效） #

不需要后续修改DOM，在净化SVG的时候直接把颜色注入到SVG代码中，这是最符合Angular数据流理念的方式：

getMergedSvgList() {
  const appConstants = new constants.APPCONSTANTS;
  this.http.get(appConstants.svgListJSON).subscribe(res => {
    const result = res["data"];
    // 遍历数据，处理SVG并生成steps数组
    this.steps = result.map(item => {
      let svgHtml = item.icon;
      
      // 选择一种适合你的注入方式：
      // 方式1：给所有带prefix__cls-1类的元素添加fill
      svgHtml = svgHtml.replace(/class='prefix__cls-1'/g, `class='prefix__cls-1' fill="${item.color}"`);
      
      // 方式2：给所有path元素添加fill（如果所有path都需要改色）
      // svgHtml = svgHtml.replace(/<path/g, `<path fill="${item.color}"`);
      
      // 方式3：给SVG根元素设置fill（如果子元素继承fill属性）
      // svgHtml = svgHtml.replace(/<svg id='svg-icon'/g, `<svg id='svg-icon' fill="${item.color}"`);
      
      return {
        icon: this.sanitizer.bypassSecurityTrustHtml(svgHtml),
        color: item.color
      };
    });
  });
}

这样渲染出来的SVG直接就带有正确的fill颜色，完全不需要后续DOM操作。

备选方案：用Angular的ViewChildren操作DOM（如果必须后续修改） #

如果你需要动态修改颜色（比如用户交互后变色），可以用Angular的ViewChildren来安全获取DOM元素：

第一步：修改HTML模板（去掉重复ID，添加模板引用变量） #

<div class="steps" *ngFor="let step of steps; let i = index;">
  <div class="step-image" #svgContainer [innerHTML]="step.icon"></div>
</div>

第二步：在组件中使用ViewChildren处理 #

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('svgContainer') svgContainers!: QueryList<ElementRef>;
  steps: Array<{icon: any, color: string}> = [];

  getMergedSvgList() {
    const appConstants = new constants.APPCONSTANTS;
    this.http.get(appConstants.svgListJSON).subscribe(res => {
      const result = res["data"];
      this.steps = result.map(item => ({
        icon: this.sanitizer.bypassSecurityTrustHtml(item.icon),
        color: item.color
      }));
      
      // 等待DOM渲染完成后修改颜色
      Promise.resolve().then(() => this.updateSvgColors());
    });
  }

  updateSvgColors() {
    this.svgContainers.forEach((container, index) => {
      const svgIcon = container.nativeElement.querySelector('#svg-icon');
      if (!svgIcon) return;
      
      // 找到需要修改的path元素（比如带prefix__cls-1类的）
      const targetElements = svgIcon.querySelectorAll('path.prefix__cls-1');
      targetElements.forEach((elem: SVGElement) => {
        elem.setAttribute('fill', this.steps[index].color);
      });
    });
  }

  ngAfterViewInit() {
    // 如果steps在组件初始化时已有数据，可在这里调用updateSvgColors()
  }
}

为什么原来的代码失败？ #

• 重复的id="steps"导致选择器失效，jQuery只能找到第一个元素。
• 未定义的index变量让eq(index)无法定位正确的元素。
• 直接用jQuery操作Angular管理的DOM，可能会被Angular的变更检测覆盖，导致修改无效。

内容的提问来源于stack exchange，提问作者Sanjay Sahani