如何实现SVG拉伸时保留局部图形比例？HTML/CSS背景适配

要实现拉伸时保持SVG左下角形态（含曲线）不变，同时适配不同尺寸容器，可通过以下两种核心方法实现：

方法1：将SVG作为背景图，混合单位定义路径 #

直接在SVG的path中结合固定像素单位和百分比单位，让需要固定的左下角区域用px，其余适配容器的部分用%，配合viewBox和CSS背景属性实现拉伸适配。

示例代码：

<!-- 保存为shape.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
  <!-- 路径说明：顶部和右侧随容器拉伸，左下角内缩30px，曲线部分水平方向固定长度 -->
  <path d="M 0,0
           L 100%,0
           L 100%,100%
           L 30px,100%
           C 15px,90% 0,80% 0,100%
           Z" 
        fill="#cccccc" />
</svg>

CSS中使用时：

.box {
  width: 500px; /* 可改为任意宽度 */
  height: 200px; /* 可改为任意高度 */
  background: url('shape.svg') no-repeat center / 100% 100%;
}

方法2：使用SVG裁剪路径（支持曲线，替代CSS polygon） #

利用SVG的<clipPath>元素定义含曲线的形状，设置clipPathUnits="userSpaceOnUse"后，路径可混合px和%单位，既保留CSS背景的灵活性，又支持曲线效果。

示例代码：

<style>
  .box {
    width: 400px;
    height: 180px;
    background: linear-gradient(45deg, #2196F3, #4CAF50);
    clip-path: url(#fixedBottomLeftClip);
  }
</style>

<!-- 隐藏的SVG定义裁剪路径 -->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="fixedBottomLeftClip" clipPathUnits="userSpaceOnUse">
    <path d="M 0,0
             L 100%,0
             L 100%,100%
             L 30px,100%
             C 15px,90% 0,80% 0,100%
             Z" />
  </clipPath>
</svg>

<div class="box"></div>

关键说明 #

• 固定区域（左下角）：用px单位定义长度，确保拉伸时形态不变；
• 适配区域：用%单位，随容器尺寸自动伸缩；
• SVG的clipPath完全支持曲线（C/S/Q等路径指令），完美解决CSS polygon不支持曲线的问题。

内容的提问来源于stack exchange，提问作者Damian Pereira