如何缩放clip-path: path()使其自适应容器并跟随canvas同步拉伸

你遇到的是clip-path内path路径默认使用绝对坐标，无法跟随容器自适应的问题，有两种常用实现方案：

方案1：直接使用path()的viewBox参数（现代浏览器支持） #

CSS的path()函数已支持附加viewBox参数，只要把原路径的坐标范围告诉浏览器，就会自动适配容器边界拉伸，不需要修改原路径坐标：
你原路径的坐标范围是X轴0_{100，Y轴-25}125，直接修改clip-path属性即可：

.clip {
    width: 100%;
    height: 100%;
    background-color: orange;
    /* 追加viewBox参数，四个值分别是 最小X 最小Y 路径总宽 路径总高 */
    clip-path: path('M 100 50 A 75 75 0 0 1 0 50 A 75 75 0 0 1 100 50 z' viewbox="0 -25 100 150");
}

修改后可以随意调整.canvas的宽高，内部裁剪区域会自动同步拉伸适配。

方案2：SVG定义裁剪路径（兼容性更好，支持低版本浏览器） #

如果需要兼容旧版浏览器，可以用SVG定义clipPath，设置单位为相对于元素边界，再把路径坐标转换为0~1的相对值：

第一步：在HTML中插入SVG裁剪定义 #

<div class="canvas">
  <div class="clip">sadf</div>
</div>
<!-- 隐藏的SVG裁剪定义 -->
<svg width="0" height="0" style="position:absolute;visibility:hidden;">
  <defs>
    <clipPath id="customClip" clipPathUnits="objectBoundingBox">
      <!-- 原坐标都除以路径总宽100、总高150转换为相对值 -->
      <path d="M 1 0.5 A 0.75 0.5 0 0 1 0 0.5 A 0.75 0.5 0 0 1 1 0.5 z" />
    </clipPath>
  </defs>
</svg>

第二步：CSS中引用该裁剪路径 #

.clip {
    width: 100%;
    height: 100%;
    background-color: orange;
    clip-path: url(#customClip);
}

两种方案都可以实现裁剪区域跟随canvas容器任意拉伸适配，不需要固定容器尺寸。

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