如何使svg响应[重复]

Question

我正在努力使这个巨大的 svg 响应。但是，它不起作用，我不知道为什么。

我尝试了以下方法： - 设置宽度：100% 高度：自动（一旦我删除了以像素为单位的设置宽度/高度，图表就会消失，无论我放回什么） - 使用 @987654321 建议的 viewbox 属性@

这是代码（是的，我知道它很大。为什么我需要使其适合 100% 宽度）：http://www.cssdesk.com/bsakG

有人可以提示我做错了什么吗？我尝试了其他文章建议的许多事情，但我似乎一直遇到同样的问题，如果我摆脱固定的高度/宽度，整个事情就消失了。

（是的，我知道这个问题之前可能已经被问过，但没有一个答案能解决我的问题）

Answer 1

我找不到任何可以帮助您的 SVG 原生内容（我尝试过使用 viewBox 和 preserveAspectRatio，但没有取得多大成功）。我相信一定有办法，但我可能会过度寻找一些东西。如果有人有更好的解决方案，一定要发布！

我确实得到了一种 JavaScript 方法，所以我想我会分享它。在这个演示中，我将使用 jQuery，但如果你不能使用 jQuery，所有这些都可以使用 vanilla JavaScript 来完成。

JavaScript：

$(function(){
    scaleSVG();
});

function scaleSVG(){
    var window_width = $(window).width(),
        $svg = $('svg'),
        ratio = window_width / $svg.width();

    $svg.css('min-width', window_width);
    $('g:first-child', $svg).attr('transform', 'scale(' + ratio + ')');
};

我做了一个小提琴演示这个方法here（由于 SVG 的大小，加载可能需要一秒钟）。

您也可以将这个scaleSVG() 函数附加到窗口调整大小事件，如下所示：

$(function(){
    $(window).on('resize', scaleSVG);
}); 

我无法让它在小提琴中工作，但我认为可能是因为小提琴环境？

Answer 2

与 cmets 中的假设相反，使用指定为百分比的长度值是完全可以的。该规范在其基本数据类型部分涵盖了details。

将这些知识与您在问题中链接到的文章中的提示相结合，您最终可能会得到类似以下内容的响应式布局：

<svg viewbox="0 0 3840 7000" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">