Hiding a gradientRect in JS

[CluelessExpert]

 I have the following code defining a gradientRect in my SVG code:

  <gradientRect x="0" y="0" width="100%" height="100%"
    id="grBurst"
    gradient-type="radial"
    gradient-x1="50%" gradient-y1="50%"
    gradient-x2="50%+150" gradient-y2="50%+150"
    gradient-color1="magenta"
    gradient-color2="blue"
  />

This is close to a cut and paste from the guide. I can add:

visibility="hidden"

in the code and it works wonderfully. The trouble is I can't find a way to do it in JS. I've tried:

• grBurst.style.visibility="hidden"; 
• grBurst.visibility = "hidden"; 
• grBurst.gradient.visibility = "hidden";
• grBurst.style.display = "none";

and probably half a dozen other variations. Each of these will either display an error message or do nothing. Is there a way to do it? Is there a way I could have learned how to do it myself?

[Gondwana]

.style.display = "none" should do it. Have you correctly set the value of grBurst in your javascript?

[CluelessExpert]

I set grBurst with:

const grBurst = document.getElementById("grBurst");

This is the same way I define all of my other elements.

The .style.display = "none" statement returns "Unhandled TypeError: Cannot assign property 'display' of undefined."

[JonFitbit]

That's a weird one. You could just wrap it in an <svg id="blah">, then hide that svg element.