html - 缩放 Svg 而不拉伸(stretch)它的一部分

Question

这个问题与this one非常相似但我认为这对我来说“太复杂”了，我想知道是否有更简单的方法。

我有一个 svg 路径(较暗的路径)，我想在调整大小时填满整个屏幕(高度 100%)但不拉伸(stretch)顶部曲线。

填满整个屏幕不是问题，但是在不拉伸(stretch)顶部曲线的情况下这样做是有问题的，我想“扩展”它下面的矩形。

Answer 1

你的右边和底边是平的。所以在这种情况下有一个非常简单的解决方案。

只需让您的形状(路径)延伸到远离 SVG 的右侧和底部，并让形状被 SVG 的边缘剪裁。

body {
  margin: 0;
}

div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 10px;
}

<div>
  <svg width="100%" height="100%">
    <path id="top" d="M 0,0 L 50,0 Q 70,0, 90 20 Q 110,40 130,40 H 4000 V 4000 H 0 Z"/>
  </svg>
</div>