是什么导致 svg 图像在调整大小时消失？答案

【问题标题】：What causes svg image to disapear on resize?是什么导致 svg 图像在调整大小时消失？
【发布时间】：2014-05-21 10:44:10
【问题描述】：

我正在处理一个项目，我最初在该项目中显示 svg 文件的一部分。当用户单击切换按钮时，它会隐藏 svg 文件的该部分并显示同一 svg 的另一部分。我编写了一个脚本，它根据窗口的大小调整图像的大小，因此图像总是适合窗口的宽度。当我调整最初查看的 svg 部分的大小时，效果很好。

但是，当我切换到 svg 文件的备用部分时，它会在调整大小时消失。我不确定是什么原因造成的。为什么我的代码适用于 svg 文件的一部分而不适用于另一部分？

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/ 我有一个半模拟行为的 jsfiddle。第二张图像在调整大小后明显消失，尽管我的调整大小函数应该将空白折叠到 jsfiddle 没有执行的绘图的高度。谢谢，--克里斯托弗

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

我发现在我的 switch 函数中，当我将显示设置为 none 时，元素不再具有可计算的高度。所以它被设置为0高度。我修改了 setSVGheight 函数以包含以下内容。

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";
  }

}

我检查了用于测量高度的部分是否未显示为块。然后我将其设置为块，计算高度，然后重置为无。

【讨论】：