如何让CSS clip-path绝对路径适配元素尺寸？含Inkscape相关疑问

一、CSS层面直接修复（无需修改原路径） #

不用改动现有路径，改用内联SVG的<clipPath>元素并设置clipPathUnits="objectBoundingBox"，路径会自动基于目标元素的宽高百分比缩放：

<section>
  <svg width="0" height="0" viewBox="0 0 1 1">
    <clipPath id="customClip" clipPathUnits="objectBoundingBox">
      <!-- 原路径坐标除以原SVG画布宽高（此处假设原画布为120x120） -->
      <path d="m0.0697 0.0819c0.569-0.0516 0.3251 0.1028 0.6734-0.0089 0.0505-0.0162 0.1544 0.0065 0.2718 0.0089-0.1657 0.8557 0.1548 0.5752 0 0.9175-0.3503-0.0299-0.6899-0.2768-0.9452 0-0.228-0.7117 0.2721-0.7746 0-0.9175z"/>
    </clipPath>
  </svg>
  <div id='clipme'></div>
</section>

section {
  width: 320px;
  height: 320px;
  border: 1px solid black;
}

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

原理：objectBoundingBox会将路径坐标解析为目标元素的相对比例（0对应0%，1对应100%），只要把原绝对坐标除以原SVG画布的宽/高，就能得到适配任意尺寸的相对路径。

二、绝对路径转相对值的方法 #

1. 手动计算：先确定原SVG的viewBox宽高（从路径坐标看，你的原画布宽高约为120），把路径里所有数字统一除以该数值即可。
2. 脚本批量转换：用简单JS片段处理路径字符串，批量完成缩放：

const originalPath = 'm8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1z';
const scale = 120; // 原SVG画布宽高
const relativePath = originalPath.replace(/[-+]?\d+\.?\d*/g, num => (parseFloat(num)/scale).toFixed(4));
console.log(relativePath);

运行后直接复制输出的路径，即可用于CSS的path()或SVG元素中。

三、Inkscape中直接导出相对路径 #

1. 打开蒙版SVG文件，选中目标路径，点击对象 > 变换 > 缩放，设置缩放比例为1/原画布宽（比如原画布宽120，就设为0.008333），勾选"按比例缩放"后点击应用。
2. 或者调整文档属性：点击文件 > 文档属性，将viewBox设为0 0 1 1，再把路径缩放到填满这个1x1的画布。
3. 选中路径，右键复制SVG路径，此时得到的路径坐标就是0-1之间的相对值，直接使用即可适配任意元素尺寸。

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