Question

我试图让这个大规模的svg响应。但是，它不起作用，我不知道为什么。

我尝试了以下操作： - 设置宽度：100％高度：自动（一旦我移除了像素中的设置宽度/高度，图表就消失了，无论我放回什么） - 使用{{{{ 3}}

这里是代码（是的，我知道它很大。为什么我需要让它适合100％宽度）：https://css-tricks.com/scale-svg/

有人可以给我一些关于我做错的提示吗？我试过很多其他文章提出的建议，但我似乎一直遇到同样的问题，如果我摆脱固定的高度/宽度，整个事情就会消失。

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

Answer 1

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

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

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

Answer 2

我无法找到任何可以帮助您的原生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);
});

我无法让这个在小提琴中工作，但我想是因为小提琴的环境可能????

如何使svg响应

2 个答案: