Search code examples
javascripthtmlsvggradient

Changing SVG's gradient using JS

I'm trying to change the stop color of a gradient in the following SVG element, by attempting to change the stop-color attribute, but it does not work:

<svg><defs> 
<linearGradient gradientTransform="rotate(90)">
<stop offset="40%" stop-color="purple" id="firstGradient"/>
<stop offset="100%" stop-color="red" id="secondGradient"/>
</linearGradient>
</defs>
<Here's a long line of picture>
</svg>

I am using the following script statement to attempt to change the stop color:

document.getElementById("firstGradient").stopColor ="red";

I also have tried document.getElementById("firstGradient").attr.stop-color = "red";.

Neither approaches work. How do I change the stop color?

Solution

  • Did you try it with:

    document.getElementById("firstGradient").style.stopColor ="red";