缩放 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>