能否为SVG clip-path设置固定宽高，使其不随应用的g标签缩放？

要实现clip-path不随绑定的标签缩放，只需要做两处调整即可：

方案说明 #

• 给<clipPath>标签添加clipPathUnits="userSpaceOnUse"属性：默认clipPath的坐标系是跟随绑定元素的局部坐标系（objectBoundingBox），会随着绑定元素的变换同步缩放，设置为userSpaceOnUse后，剪切路径会固定使用SVG全局的用户坐标系，尺寸位置不会受绑定元素内部变换的影响。
• 调整元素嵌套结构：将需要缩放的内容单独嵌套在子<g>标签中，clip-path绑定在父级<g>上，仅给子<g>添加缩放变换即可，父级的剪切路径不会受到内部子元素缩放的影响。

修正后的完整代码 #

（注：原代码缺失<defs>开头标签，已补充）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 190">
  <defs>
    <!-- 添加clipPathUnits属性 -->
    <clipPath id="clip-1" clipPathUnits="userSpaceOnUse">
      <path d="M516.16,170h0L468.74,92A9.19,9.19,0,0,0,453,92L405.61,170a66.66,66.66,0,1,0,110.55,0Z" transform="translate(-394.23 -87.62)"/>
    </clipPath>
    <path id="wave" d="m-115,50q38-30 75,0t75,0 75,0 75,0
75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0
v20 h-1540 v-20"/>
    <clipPath id="wave-clip-front">
      <use class="wave wave-front" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <clipPath id="wave-clip-middle">
      <use class="wave wave-middle" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <clipPath id="wave-clip-back">
      <use class="wave wave-back" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <linearGradient id="grad-front" x1="-22%" y1="-21.2941%" x2="122%" y2="121.294%">
      <stop offset="0%" stop-color="rgb(48,34,173)" stop-opacity="1" />
      <stop offset="100%" stop-color="rgb(200,109,215)" stop-opacity="1" />
    </linearGradient>
    <rect id="clipped-wave" x="0" y="0" width="100%" height="100%" />
  </defs>
  <!-- 父级g绑定clip-path，不做缩放 -->
  <g class="waves" style="clip-path:url(#clip-1);fill:#F3E5F5;">
    <!-- 子级g单独做缩放变换，scale的值按需修改即可 -->
    <g transform="scale(1.5)">
      <use href="#clipped-wave" clip-path="url(#wave-clip-back)" fill="url(#grad-front)" fill-opacity="0.47"  />
      <use href="#clipped-wave" clip-path="url(#wave-clip-middle)" fill="url(#grad-front)" fill-opacity="0.47"  />
      <use href="#clipped-wave" clip-path="url(#wave-clip-front)" fill="url(#grad-front)" fill-opacity="0.88" />
    </g>
  </g>
</svg>

如果需要调整缩放比例，直接修改子g的transform="scale(xxx)"参数即可，外层的菱形剪切路径会始终保持固定尺寸，不会跟着内部波浪一起缩放。

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