У меня есть массив с SVG (который очищается перед вставкой в массив) и его цветовой код заполнения. И я рендеринг этих SVG-файлов в html с использованием тега [innerHTML] и пытаюсь применить его цвет заливки, исходя из самого массива
ПРИМЕЧАНИЕ: я добавил id = 'svg-icon' внутри всех svgs, таких как
<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>
Я могу успешно показать эти SVG на HTML, используя это
<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, но не могу изменить их цвет заливки