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”设置为“none”以及“viewBox”属性，即可解决问题。

Answer 3

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

要使宽度占优势的溢出：

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

以下代码适用于我的learning project，不是生产代码。

在head元素中：

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

SVG视图框并在y轴上滚动

3 个答案: