Question

34

How to hide SVG elements with JavaScript on a button click?

rated 0 times [ 37] [ 3] / answers: 1 / hits: 17633 / 8 Years ago, tue, october 18, 2016, 12:00:00

I have tried doing that with this code:

svgElement.style.display = none;

but it didn't work. How is it possible to do it with getElementById?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dallasb

Add To Favorites

Follow

Total Points: 657

Total Questions: 98

Total Answers: 97

Location: Luxembourg

Member since Tue, Jan 25, 2022

2 Years ago

answered 8 Years ago harleyaleenag · Accepted Answer

You can use the style property display and set it to none

function hideSVG() {

  var style = document.getElementById(myRect).style.display;

  if(style === none)

    document.getElementById(myRect).style.display = block;

  else

    document.getElementById(myRect).style.display = none;

  //or to hide the all svg

  //document.getElementById(mySvg).style.display = none;

}

<svg id=mySvg>

  <rect id=myRect fill=red width=100px height=100px></rect>

</svg>

<button onclick=hideSVG()>Hide/Show</button>