如何让SVG的clip-path随容器缩放及位移同步调整？

要让clip-path跟随被裁剪元素（这里是<rect>）的缩放、位移同步调整，核心是修改裁剪路径的坐标参考体系——默认clipPath的坐标基于SVG全局坐标系（userSpaceOnUse），需改成基于被裁剪元素的边界框坐标系。

关键步骤： #

1. 给<clipPath>添加clipPathUnits="objectBoundingBox"属性
   这个属性会把被裁剪元素的边界框（左上角为0,0，右下角为1,1）作为裁剪路径的坐标基准，裁剪路径会自动适配元素的尺寸和位置变化。
2. 将裁剪路径的绝对坐标转换为相对比例值
   把原<path>的所有坐标值，转换为相对于被裁剪元素宽高的比例（偏移量需先减去元素的x/y值，再做比例转换）。

修改后的SVG代码示例 #

<svg viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
<defs>
    <clipPath id="clipPath" clipPathUnits="objectBoundingBox">
        <!-- 转换为相对比例的路径坐标 -->
        <path d="M 1/38 1/18 q 49/190 41/90 1/2 -1/18 c -7/95 23/45 -7/95 4/9 9/38 1/2 c -12/95 -1/90 -5/19 -1/15 -9/38 7/18 c -7/95 -22/45 -53/190 -73/90 -52/95 -28/45 Z"/>
    </clipPath>
</defs>

<!-- 调整rect的x/y/width/height，裁剪路径会自动适配 -->
<rect x="5" y="5" width="190" height="90" fill="#770000" clip-path="url(#clipPath)"/>
<!-- 测试用的另一个rect，裁剪路径已自适应 -->
<rect x="30" y="110" width="120" height="60" fill="#007700" clip-path="url(#clipPath)"/>
</svg>

补充说明 #

• 你之前尝试给<clipPath>或<path>加x/y/width/height无效，因为<clipPath>本身不支持这些布局属性，<path>的x/y仅用于文本路径场景，无法位移路径形状。
• 如果需要更直观的路径编辑，可以先在全局坐标系下画好路径，再通过公式批量转换坐标：
  • 相对X = (原X - 元素X) / 元素宽度
  • 相对Y = (原Y - 元素Y) / 元素高度

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