Question

如果视图框设置太大，则页面将滚动。有没有一种方法可以使视图框适合任何给定浏览器的大小？例如，我现在正在使用1600 x 1900浏览器，并带有以下视图框：

<svg viewBox="-300 0 1920 995">

，我的页面滚动。我最初是在1080p显示器上制作网页的，但该网页没有滚动。

Answer 1

您有点错误的方法。 viewBox是使SVG具有响应能力的工具。它告诉浏览器如何缩放SVG的内容以适合父级。 width和height属性是用来设置SVG大小的。

您需要做的是将SVG的大小限制在窗口范围内。然后viewBox将使您调整内容的大小以适合内容。

例如：

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%
}

<svg width="100%" height="100%" viewBox="0 0 100 100">

  <circle cx="50" cy="50" r="50" fill="rebeccapurple"/>
  
</svg>

在此示例中。我已强制<body>匹配窗口大小。然后使SVG填充。

使示例全屏显示。然后尝试放大和缩小窗口。使其变窄或变宽。圆会自动调整大小，使其适合窗口。