Html 如何使svg具有响应性

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

我尝试了以下方法：-设置宽度：100%高度：自动（当我删除设置的像素宽度/高度时，图表就会消失，不管我放回了什么）-按照建议使用viewbox属性

下面是代码（是的，我知道它很大。为什么我需要使它适合100%宽度）：

有人能给我一些提示，说明我做错了什么吗？我尝试了其他文章提出的许多方法，但我似乎一直遇到同样的问题，如果我去掉固定的高度/宽度，整个方法就消失了

---

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

我找不到任何SVG本机的东西可以帮助您（我尝试过使用

viewBox

和

preserveAspectRatio

，但没有太大成功）。我相信一定有办法，但我可能是看过头了。如果有人有更好的解决方案，一定要发布

我确实使用了JavaScript方法，所以我想与大家分享一下。在这个演示中，我将使用jQuery，但是如果您不能使用jQuery，那么所有这些都可以通过香草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 + ')');
};

我已经详细演示了这种方法（由于SVG的大小，加载可能需要一秒钟）

您可能还可以将此

scaleSVG（）

函数附加到窗口调整大小事件，如下所示：

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

---

我无法在fiddle中实现这一点，但我想这可能是因为fiddle环境的缘故吧？

我找不到任何SVG本机可以帮助您的东西（我尝试过使用

viewBox

和

preserveAspectRatio

，但没有太大成功）。我相信一定有办法，但我可能是看过头了。如果有人有更好的解决方案，一定要发布

我确实使用了JavaScript方法，所以我想与大家分享一下。在这个演示中，我将使用jQuery，但是如果您不能使用jQuery，那么所有这些都可以通过香草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 + ')');
};

我已经详细演示了这种方法（由于SVG的大小，加载可能需要一秒钟）

您可能还可以将此

scaleSVG（）

函数附加到窗口调整大小事件，如下所示：

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

---

我无法在小提琴中实现这一点，但我认为这可能是因为小提琴环境的缘故？？？

与评论中的假设相反，使用指定为百分比的长度值是完全正确的。规范在其“基本数据类型”部分中介绍了

将这些知识与您在问题中链接到的文章中的提示结合起来，您可能最终得到如下内容，以获得响应性布局：

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

---

与注释中的假设相反，使用指定为百分比的长度值是完全正确的。规范在其“基本数据类型”部分中介绍了

将这些知识与您在问题中链接到的文章中的提示结合起来，您可能最终得到如下内容，以获得响应性布局：

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

SVG不是已经响应了吗？这不是SVG（可缩放矢量图形）的本质吗？是的，它是可缩放的，所以我想问如何缩放它，因为默认情况下，每条路径都有数字。不同的网站建议有不同的方法通过标签中的不同属性来操作它，但我没有成功。您是否尝试将此添加到最外层的

：

？可能是因为SVG规范不允许SVG节点的总体宽度和高度（这对我来说很奇怪）。在我脑海中看到（查看“坐标系单位”部分），我唯一能想到的就是使用javascript。您必须将SVG宽度除以浏览器窗口宽度，然后将其设置为最外层的缩放编号

。i、 e.如果SVG宽度为3840px，浏览器窗口为2000px，则-2000/3840=0.520833333，然后

。但我知道一定有更简单的方法SVG不是已经响应了吗？这不是SVG（可缩放矢量图形）的本质吗？是的，它是可缩放的，所以我想问如何缩放它，因为默认情况下，每条路径都有数字。不同的网站建议有不同的方法通过标签中的不同属性来操作它，但我没有成功。您是否尝试将此添加到最外层的

：

？可能是因为SVG规范不允许SVG节点的总体宽度和高度（这对我来说很奇怪）。在我脑海中看到（查看“坐标系单位”部分），我唯一能想到的就是使用javascript。您必须将SVG宽度除以浏览器窗口宽度，然后将其设置为最外层的缩放编号

。i、 e.如果SVG宽度为3840px，浏览器窗口为2000px，则-2000/3840=0.520833333，然后

。但我知道一定有一个更简单的方法是的，但它不是设置文件的宽度和高度。它只是告诉渲染器SVG内容的维度是什么，以便它可以计算出要使用的正确比例。假设您知道SVG文档的大小，那么这是最简单的方法。我知道我知道。尽管svg将由用户生成，但svg标记实际上以的格式指定了高度和宽度。因此，我必须运行一些jquery以将其格式化为viewbox=“0……”，这很容易做到。谢谢你的两个答案！我非常感谢你的帮助@Novina问题不是，如果您知道svg的外部大小，而是它的内容大小。因为您使用坐标放置内容，所以您可能知道svg的这些内部维度。

视图框