svg - SVG 视图框和在 y 轴上滚动

Question

我有一个巨大的 svg 3200*1800。我只想显示该图像的一部分，例如 400*1000，确保宽度是主要属性并具有高度的滚动条，但是当我设置视图框时，它会增加宽度以显示添加的高度。

   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

您只需将 'preserveAspectRatio' 与 'viewBox' 属性一起设置为“none”，您的问题就解决了。

Answer 3

这个答案建立在Shane的答案（不适合可变窗口大小）的基础上......

让宽度占优势的溢出：

1. 让“视图框”定义要显示的图形部分（任何已知的纵横比）
2. 让 svg 元素具有默认宽度和高度（100%）
3. 使用javascript，每次调整窗口大小时动态设置svg元素的高度

下面的代码适用于我的学习项目，而不是生产代码。

在头部元素中：

<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>