Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Hiding a gradientRect in JS

 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?

 

Best Answer
0 Votes
3 REPLIES 3

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

Peter McLennan
Gondwana Software
Best Answer
0 Votes

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

 

Best Answer
0 Votes

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

Best Answer
0 Votes