JS change SVG gradient-color[#]

[NicholasConrad]

Changing the fill attribute on a rect element works fine:

if (data.colorBackground) {
    bGround.style.fill = data.colorBackground;
}

But I cannot find an equivalent for changing a gradient-color[1/2] attribute of a gradientRect element:

if (data.colorBackground) {
    bGroundGrade.style.gradientColor1 = data.colorBackground;
}

Produces: Unhandled TypeError: Cannot set property 'gradientColor1' of undefined

Meanwhile,

if (data.colorBackground) {
    bGroundGrade.gradientColor1 = data.colorBackground;
}

doesn't throw an error, but neither does it change my background gradient color.

Any help would be appreciated, thanks!

[Ursamour]

Hey, I'm going through the same thing and will definitely find an answer somehow. I'll let you know what I discover, if anything. Do you have any idea how to change the viewport-fill of an SVG by chance? Pretty similar problem.

[JonFitbit · Accepted solution]

Try: 

bGroundGrade.gradient.colors.c1 = data.colorBackground;

[Ursamour]

That worked wonderfully, thank you. Any hints on changing the viewport fill color?

[Ursamour]

I decided that I can just use a rect across the entire background and change its .style.fill property instead.