Is there any solution can set svg clip-path doesn't scale with the tag I apply on? I want to scale the g tag and also keep the clip-path size fixed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 190">
<clipPath id="clip-1">
<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>
<g class="waves" style="clip-path:url(#clip-1);fill:#F3E5F5;">
<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
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>
<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>
</svg>CodePudding user response：
Wrap the <g> you want to transform in another <g>. Then apply the clippath to the outer group.
<g style="clip-path:url(#clip-1);">
<g class="waves" style="fill:#F3E5F5;" transform="..whatever..">
...etc...
</g>
</g>