缩放Svg，而无需拉伸其一部分

Question

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

我有一个 svg路径（较暗的路径），我想在调整大小但不拉伸的情况下填满整个屏幕（高度100％）顶部曲线。

填满所有屏幕不是问题，但是不拉伸顶部曲线就可以了，我想“扩展”矩形下方的矩形。

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>