SVG 视图框和在 y 轴上滚动答案

【问题标题】：SVG viewbox and scrolling on the y-axisSVG 视图框和在 y 轴上滚动
【发布时间】：2012-06-13 16:04:17
【问题描述】：

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

   viewBox="900 550 400 1000"

他们有办法阻止这种情况发生吗？

【问题讨论】：

标签： svg viewbox

【解决方案1】：

我发现你需要增加相对于视图框的高度，例如我最终得到了这样的结果：

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

与我以前的相比：

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

【讨论】：

【解决方案2】：

此答案基于 Shane 的答案（不适合可变窗口大小）...

有宽度占优势的溢出：

让“视图框”定义要显示的图形部分（任何已知纵横比）
让 svg 元素具有默认宽度和高度 (100%)
使用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>

【讨论】：

【解决方案3】：

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

【讨论】：