什么原因导致svg图像不能调整大小？

我有一个项目，我在哪里最初显示一个svg文件的一部分。当用户点击一个开关按钮时，它隐藏了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

来源

2014-05-21 Christopher Gaston

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

}

我检查，看看是否用于测量高度的部分没有被显示为一个块。然后我设置它阻止，计算高度，然后重置为无。

来源

2014-05-21 02:44:10

什么原因导致svg图像不能调整大小？

回答

相关问题