Question

我有一个SVG图形，它是容器的子元素。

如果我希望它适合此容器的整个宽度，通常我会preserveAspectRatio="none"并将宽度设置为100％（如果要向SVG添加一些额外的高度，则可以使用可选的高度值）。 / p>

但是，我希望它能使SVG适合容器，但是当我将窗口拖动到较小的尺寸时，楔形形状（即SVG的对角）保持相同的角度，同时仍在填充容器。

在示例代码中，我保留了preserveAspectRatio=none代码以显示我想要的一般效果（不同之处在于，我希望楔子的角度保持不变，因为减小了窗口的大小）。尺寸）。

这可能吗？我正在努力想办法使它起作用。

这是一个Codepen：https://codepen.io/emilychews/pen/pGbPby

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 4rem;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="none" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

Answer 1

如果您希望SVG保持其长宽比而不拉伸，则不要使用preserveAspectRatio="none"。使用不同的preserveAspectRatio值。例如"xMinYMax slice"。

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 4rem;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="xMinYMax slice" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

但是，如果页面足够宽以至于楔形变得很高以致顶部被剪断，那么您显然将不得不决定要发生什么。例如，在您的示例（以及上面的示例）中，您已将SVG的高度限制为4em。因此，您只会看到楔子的底部。

如果我将SVG高度更改为100%，您会看到更多。

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 100%;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="xMinYMax slice" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

当然，您可能还想减小楔形的角度。

保持SVG比例，同时减小窗口（或容器）尺寸

1 个答案: