Question

当浏览器窗口更改时，我想保持比例，以便viewBox始终具有屏幕的大小，但是当我尝试下面的代码时，它将viewBox缩小。有人可以进一步帮助我吗？

viewPort.setAttribute("width", screen.width);
viewPort.setAttribute("height", screen.height);
viewPort.setAttribute("viewBox","0 0 "+(screen.width-(screen.width+window.innerWidth))+" "+(screen.height-(screen.height+window.innerHeight)));

Answer 1

您的要求不清楚。我认为您可能对术语以及viewBox的实际用途感到困惑。

视口是指页面上<svg>元素的大小。有时称为画布。其大小由width和height属性设置。
viewBox 描述SVG的 content 的范围。其目的是告诉渲染器所有内容在哪里。渲染器使用这些尺寸确定如何缩放内容以适合视口。

您是否只希望SVG与浏览器窗口的大小完全相同？如果是这样，那么您要做的就是：

viewPort.setAttribute("width", window.innerWidth);
viewPort.setAttribute("height", window.innerHeight);

您根本不需要viewBox。 SVG不会缩放，但会与浏览器窗口的大小匹配。

但是，如果您确实希望SVG缩放以适合窗口，那么您确实需要一个viewBox。但是viewBox必须设置为SVG 内容的大小，而不是SVG画布/视口的大小。

通常viewBox将为恒定。当浏览器调整大小时，您无需更改它。

在下面的示例中，我将viewBox设置为匹配椭圆元素的位置和大小。我添加了一个紫色矩形来代表实际的viewBox尺寸。请注意，viewBox区域根据需要放大或缩小以适合窗口（和视口）。默认情况下，它被缩放以完全适合视口内部。但是您可以使用preserveAspectRatio属性更改该行为。

var viewPort = document.getElementById("mysvg");

function setViewportSize() {
  viewPort.setAttribute("width", window.innerWidth);
  viewPort.setAttribute("height", window.innerHeight);
}

// Update SVG size when browser is resized
window.addEventListener("resize", setViewportSize);

// Set initial SVG size
setViewportSize();

html, body {
  margin: 0;
  overflow: hidden;
}

svg {
  background-color: linen;
}

<svg id="mysvg" viewBox="0 0 200 100">
  <rect width="100%" height="100" fill="rebeccapurple"/><!-- rect the same size as the viewBox -->
  <ellipse cx="100" cy="50" rx="100" ry="50"/>
</svg>

实际上，您根本不需要调整大小的侦听器。您只能使用CSS。

html, body {
  margin: 0;
  overflow: hidden;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: linen;
}

<svg id="mysvg" viewBox="0 0 200 100">
  <rect width="100%" height="100" fill="rebeccapurple"/><!-- rect the same size as the viewBox -->
  <ellipse cx="100" cy="50" rx="100" ry="50"/>
</svg>

更改窗口大小时保持viewBox的比例

1 个答案: