是什么导致SVG图片在调整大小后消失？

Question

I have a project I am working on where I am initially displaying one portion of an svg file. When a user clicks a switch button, it hides that portion of the svg file and displays another portion of the same svg. I have written a script that resizes the image based upon the size of the window so the image always fits the width of the window. When I resize the initially viewed portion of the svg, it does fine.

However, when I swap to the alternate portion of the svg file, it disappears upon resize. I'm not sure what is causing it. Why does my code work for one portion of the svg file and not for the other portion?

function setSVGheight(){
  var svgId = document.getElementsByTagName("svg")[0].id;
  var svgtop = document.getElementById("fullstaff").getBoundingClientRect().top;
  var svgbottom = document.getElementById("fullstaff").getBoundingClientRect().bottom;
  var svgheight = ((svgbottom-svgtop)*1.6).toFixed(3);
  document.getElementById(svgId).style.height=svgheight;
}
function exchangestaffandtab(exchangestate){
  if (exchangestate=="s2t"){
      document.getElementById("t2s").style.display="inline";
      document.getElementById("s2t").style.display="none";
      document.getElementById("fullstaff").style.display="none";
      document.getElementById("fullTAB").style.display="block";
  }else if(exchangestate=="t2s"){
      document.getElementById("t2s").style.display="none";
      document.getElementById("s2t").style.display="inline";
      document.getElementById("fullstaff").style.display="block";
      document.getElementById("fullTAB").style.display="none";
  }
}

http://jsfiddle.net/slayerofgiants/d48xJ/6/ I have a jsfiddle which semi-emulates the behavior. The 2nd image clearly disappears after resize though my resize function is supposed to collapse the whitespace to the height of the drawing which the jsfiddle is not doing. Thanks, --christopher

Answer 1

I discovered that in my switch function that when I set the display to none that the element no longer had a calculable height. So it was getting set to 0 height. I modified the setSVGheight function to include the following.

function setSVGheight(){
  var svgId = document.getElementsByTagName("svg")[0].id;
  if (document.getElementById("fullstaff").style.display != "block"){
      document.getElementById("fullstaff").style.display = "block";
      var staffnone = true;
  }
  var svgtop = document.getElementById("fullstaff").getBoundingClientRect().top;
  var svgbottom = document.getElementById("fullstaff").getBoundingClientRect().bottom;

  var svgheight = ((svgbottom-svgtop)*1.6).toFixed(3);
  document.getElementById(svgId).style.height=svgheight;

  if( staffnone == true){
      document.getElementById("fullstaff").style.display = "none";
  }

}

I checked to see if the portion used to measure height was not displayed as a block. I then set it to block, calculated the height and then reset to none.