将渐变SVG填充颜色更改为组件属性值

Question

我的app.component.html中有以下SVG：

<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>

在我的app.component.ts中，我具有以下公共属性：

export class AppComponent{
public color= '#4286f4';
public color2= '#db792e';
}

我有一个正在运行的服务，可以更改属性color和color2的值。我想实现的是svg的渐变颜色更改为属性color和color2的值。如何编辑my-cool-gradient它将使用属性的颜色？更改为stop-color='{{color}}'无效。有什么建议吗？