Вот мой код для реализации, если условие в теге SVG:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="60px" height="65px" viewBox="0 0 60 92" enable-background="new 0 0 60 92" xml:space="preserve">
<defs>
<linearGradient *ngIf="!compareCompanyRevenue" id="progress1019" x1="0" y1="1" x2="0" y2="0">
<stop id="stop1005" offset="0" stop-color="#e1edf3" />
<stop id="stop2005" offset="0" stop-color="#02ABBA" />
</linearGradient>
<linearGradient *ngIf="compareCompanyRevenue" id="progress1019" x1="0" y1="1" x2="0" y2="0">
<stop id="stop1005" offset="0" stop-color="#02ABBA" />
<stop id="stop2005" offset="0" stop-color="#e1edf3" />
</linearGradient>
</defs>
//up-arrow
<path *ngIf="!compareCompanyRevenue" fill-rule="evenodd" clip-rule="evenodd" fill="url(#progress1019)" stroke="#02ABBA" stroke-miterlimit="10" d=""/>
//down-arrow
<path *ngIf="compareCompanyRevenue" fill-rule="evenodd" clip-rule="evenodd" fill="url(#progress1019)" stroke="#02ABBA" stroke-miterlimit="10" d=""/>
</svg>
test.ts // сейчас я пытаюсь заполнить, используя javascript
document.getElementById("stop1005").setAttribute("offset", "0.25");
document.getElementById("stop2005").setAttribute("offset", "0.25");
необходимость изменения в теге «linearGradient» (стоп-цвет) зависит от условия. Но не
влияя на мои изменения.
Стрелка вверх-вниз работает нормально, но я не могу заполнить svg сверху или снизу
в соответствии с моим условием