javascript - 如何更改 [innerHTML] 的 svg 填充颜色

Question

我有一个带有 SVG 的数组(在插入数组之前对其进行了清理)及其填充颜色代码。我使用 [innerHTML] 标签将这些 SVG 渲染为 html，并尝试应用来自其自身数组的填充颜色

注意:我在所有 svgs 中添加了 id='svg-icon'喜欢

<svg id='svg-icon' xmlns='http://www.w3.org/2000/svg' width='36.342' height='34.955' viewBox='0 0 36.342 34.955'>
    <g id='prefix__noun_funds_2697308' transform='translate(-20.146 -29.5)'>
        <path id='prefix__Path_1062' d='M118.728 155.751a2.057 2.057 0 0 0 2.055-2.055.45.45 0 0 0-.9 0 1.154 1.154 0 1 1-2.308 0 .45.45 0 1 0-.9 0 2.057 2.057 0 0 0 2.053 2.055z' class='prefix__cls-1' data-name='Path 1062' transform='translate(-88.817 -113.992)'/>
        <path id='prefix__Path_1063' d='M22.04 48.648h1.611a10.784 10.784 0 0 0 1.624 2.344 7.718 7.718 0 0 1 1.977 5.188 1.844 1.844 0 0 0 1.842 1.842h1.936a1.844 1.844 0 0 0 1.842-1.842.942.942 0 0 1 .941-.941h3.613a.942.942 0 0 1 .941.941 1.844 1.844 0 0 0 1.842 1.842h.85a6.357 6.357 0 0 0 2.024 2.512l4.88 3.325a.45.45 0 0 0 .507 0l4.88-3.325a6.65 6.65 0 0 0 2.637-4.982V48.71a.45.45 0 0 0-.252-.4l-5.045-2.475a10.922 10.922 0 0 0 .1-1.441c0-.14 0-.279-.009-.418a3.186 3.186 0 0 0 2.844-3.163.45.45 0 0 0-.9 0 2.283 2.283 0 0 1-2.015 2.264c-.723-5.906-6.247-10.514-12.934-10.514a15.623 15.623 0 0 0-2.409.188A6.112 6.112 0 0 0 30.264 30a.45.45 0 0 0-.431.582l.139.453a7.687 7.687 0 0 1 .315 2.876 12.891 12.891 0 0 0-6.1 5.056l-.569.9H22.04a1.4 1.4 0 0 0-1.394 1.394v5.992a1.4 1.4 0 0 0 1.394 1.395zm33.046 6.9a5.833 5.833 0 0 1-2.243 4.238l-4.626 3.152-4.626-3.148a5.454 5.454 0 0 1-1.731-2.182 5.071 5.071 0 0 1-.512-2.056v-6.571l6.869-3.361 1.777.872 5.091 2.5zm-33.54-14.29a.494.494 0 0 1 .493-.493h1.828a.45.45 0 0 0 .381-.21l.7-1.109a11.979 11.979 0 0 1 5.9-4.789.45.45 0 0 0 .306-.376 8.583 8.583 0 0 0-.274-3.347 5.22 5.22 0 0 1 4.594 5.176.45.45 0 0 0 .9 0 6.075 6.075 0 0 0-.548-2.525 14.906 14.906 0 0 1 1.943-.128c6.68 0 12.114 4.9 12.114 10.93a10.027 10.027 0 0 1-.054 1.019l-1.416-.695a.451.451 0 0 0-.4 0L40.7 48.3a.45.45 0 0 0-.253.4v6.852a5.291 5.291 0 0 0 .259 1.569h-.5a.942.942 0 0 1-.941-.941 1.844 1.844 0 0 0-1.842-1.842h-3.609a1.844 1.844 0 0 0-1.842 1.842.942.942 0 0 1-.941.941h-1.936a.942.942 0 0 1-.941-.941 8.617 8.617 0 0 0-2.209-5.792 9.779 9.779 0 0 1-1.6-2.382.451.451 0 0 0-.408-.259H22.04a.494.494 0 0 1-.493-.493z' class='prefix__cls-1' data-name='Path 1063'/>
        <path id='prefix__Path_1064' d='M343.272 325.512l-1.9-1.85a.451.451 0 0 0-.629.645l2.211 2.156a.45.45 0 0 0 .629 0l3.984-3.885a.451.451 0 0 0-.629-.645z' class='prefix__cls-1' data-name='Path 1064' transform='translate(-295.941 -269.896)'/>
    </g>
</svg>

我可以使用此成功在 HTML 上显示这些 SVG

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

下面是我尝试更改其颜色的方法

getMergedSvgList(){
    var appConstants = new constants.APPCONSTANTS;
    console.log(appConstants.svgListJSON);
    this.http.get(appConstants.svgListJSON).subscribe(res=>{
      var result=res["data"];
      for (let i = 0; i < result.length; i++) {
      this.svg.push({icon:this.sanitizer.bypassSecurityTrustHtml(result[i].icon),color:result[i].color});
    }
    this.steps.forEach(ele=>{
        $("#steps #svg-icon").eq(index).css('fill',ele.color);
    })
    })
  }

基本上 this.steps 是最终的数组，其中包含 svg 及其填充颜色代码，例如

this.steps=[
{icon: SafeHtmlImpl, color: "#20639b"},
{icon: SafeHtmlImpl, color: "#20639b"},
{icon: SafeHtmlImpl, color: "#3caea3"}
]

完成上述操作后，我可以显示 SVGS 但无法更改其填充颜色

Answer 1

我不知道是否有更好的方法，但你只需在 svg 中添加 fill="currentColor"

<svg id='svg-icon' ... fill="currentColor">

然后你可以使用一些类似的

<div *ngFor="let step of steps">
  <div [style.color]="step.color" [innerHTML]="step.icon">
</div>

参见stackblitz