I have the following SVG in my app.component.html :
<svg width="100%" height="400" viewBox="0 0 52.916665 52.916668">
<linearGradient id="my-cool-gradient" x2="1" y2="1">
<stop offset="5%" stop-color="#00008e" />
<stop offset="95%" stop-color="#5c9bf9" />
</linearGradient>
<g id="layer1" transform="translate(0,-244.08332)">
<path
style="fill:url(#my-cool-gradient);stroke-width:0.15281798"
d="m 26.976113,295.49933 c -1.005532,-0.56934 ... -3.33015 -4.054879,-4.17686 -5.099229,-2.6614 -11.192013,-0.69552 -13.639586,4.40092 -0.813482,1.69386 -0.981873,2.55849 -0.99184,5.09274 l -0.0086,2.18921 0.49907,0.4469 c 0.662707,0.59344 1.288063,0.59351 1.881364,1.6e-4 z"
id="path826"
/>
</g>
</svg>In my app.component.ts I have the following public properties:
export class AppComponent{
public color= '#4286f4';
public color2= '#db792e';
}
I have a service running that can change the value of the properties color and color2. The thing I would like to achieve is that the gradient color of the svg changes to the values of properties color and color2. How can i edit my my-cool-gradient that it will use the color of the the properties? changing to stop-color='{{color}}' did not work. any suggestions?