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”为“无”与“视框”属性一起，那么你的问题解决了。