Question

我正在处理一个项目，我最初在显示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没有做的绘图高度。谢谢， - christopher

Answer 1

我发现在我的开关功能中，当我将显示设置为无时，该元素不再具有可计算的高度。所以它被设置为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";
  }

}

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

什么原因导致svg图像在调整大小时消失？

1 个答案: