SVG viewbox和在y軸上滾動

Question

我有一個巨大的svg 3200 * 1800。我只想顯示該圖像的一部分，例如400 * 1000，確保寬度是主要屬性並具有用於高度的滾動條，但是當我設置viewbox時，它將增加寬度以顯示增加的高度。

viewBox="900 550 400 1000" 

他們是一種阻止這種情況發生的方法嗎？

Answer 1

我的工作了，你需要增加相對例如我結束了這樣的視框的高度：

width="1400" 
height="4000" 
viewBox="966 555 350 1000" 

相比我曾經有：

width="350" 
height="1000" 
viewBox="966 555 350 1000" 

Answer 2

這個答案建立在謝恩的回答（它不迎合可變窗口大小）...

要有寬度優勢溢出：

1. 讓「視框」限定的圖形的一部分，以顯示（任何已知縱橫比）
2. 讓svg元素具有默認寬度和高度（100％）
3. 用JavaScript，動態地設定每當窗口大小調整時svg元素的高度

下面的代碼適用於我的learning project並且不是生產代碼。

在頭元素：

<script type="application/javascript"> 
    var svgRatio = ${viewboxRatio}; // ratio must be known 

    // From http://stackoverflow.com/a/13651455 
    if(window.attachEvent) { 
     window.attachEvent('onresize', resizeSvg); 
    } 
    else if(window.addEventListener) { 
     window.addEventListener('resize', resizeSvg, true); 
    } 
    else { 
     //The browser does not support Javascript event binding 
    } 

    function resizeSvg() { 
     var height = window.innerWidth * svgRatio; 
     var svg = document.getElementsByTagName('svg')[0]; 
     svg.setAttribute("height", height.toString()); 
    } 
</script> 

在身體的結尾：

<script type="application/javascript"> 
    resizeSvg(); 
</script> 

Answer 3

您只需設置「preserveAspectRatio」爲「無」與「視框」屬性一起，那麼你的問題解決了。