你能做一个响应式的视图框吗？

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填充。

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